Merge pull request #79 from strapi/feat/ai-announcement-banner

Feat/ai announcement banner

Author: PaulBratslavsky

next/app/[locale]/layout.tsx

@@ -1,12 +1,13 @@
-import { draftMode } from 'next/headers';
 import { Metadata } from 'next';
 import { ViewTransitions } from 'next-view-transitions';
 import { Inter } from 'next/font/google';
+import { draftMode } from 'next/headers';
 import React from 'react';
 
 import { DraftModeBanner } from '@/components/draft-mode-banner';
 import { Footer } from '@/components/footer';
 import { Navbar } from '@/components/navbar';
+import { AIToast } from '@/components/toast';
 import { CartProvider } from '@/context/cart-context';
 import { generateMetadataObject } from '@/lib/shared/metadata';
 import fetchContentType from '@/lib/strapi/fetchContentType';
@@ -66,6 +67,7 @@ export default async function LocaleLayout(props: {
           <Navbar data={pageData.navbar} locale={locale} />
           {children}
           <Footer data={pageData.footer} locale={locale} />
+          <AIToast />
           {isDraftMode && <DraftModeBanner />}
         </div>
       </CartProvider>

next/components/icons/external-link.tsx

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export const ExternalLinkIcon = (props: ComponentPropsWithoutRef<'svg'>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M15 3h6v6" />
+    <path d="M10 14 21 3" />
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+  </svg>
+);

next/components/icons/x.tsx

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export const XIcon = (props: ComponentPropsWithoutRef<'svg'>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </svg>
+);

next/components/toast.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+
+import { ExternalLinkIcon } from '@/components/icons/external-link';
+import { XIcon } from '@/components/icons/x';
+
+export const AIToast = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsOpen(true);
+    }, 2000);
+  }, []);
+
+  return (
+    <div
+      className={clsx(
+        'fixed bottom-4 left-4 z-50 bg-secondary text-black px-6 py-3 rounded-lg shadow-lg flex items-center gap-4 opacity-0 transition-all',
+        isOpen && 'opacity-100'
+      )}
+    >
+      <div className="flex items-start">
+        <div className="flex-1">
+          <p className="text-sm font-medium text-gray-900">Strapi AI</p>
+          <p className="mt-1 text-sm text-gray-500">
+            You can now try Strapi AI for yourself!
+          </p>
+          <div className="mt-3">
+            <a
+              href={
+                'https://docs.strapi.io/cms/configurations/admin-panel#strapi-ai'
+              }
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1.5 text-sm font-medium text-gray-900 hover:text-gray-700 transition-colors"
+            >
+              Go to docs
+              <ExternalLinkIcon className="h-3.5 w-3.5" />
+            </a>
+          </div>
+        </div>
+        <div className="ml-4 flex flex-shrink-0">
+          <button
+            type="button"
+            onClick={() => setIsOpen(false)}
+            className="inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+          >
+            <span className="sr-only">Close</span>
+            <XIcon className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};