create-brainerce-store 1.37.0 → 1.40.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.37.0",
+      version: "1.40.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -153,7 +153,10 @@ var ALLOWED_PACKAGE_MANAGERS = [
   "bun"
 ];
 var BRAINERCE_RUNTIME_DEPS = Object.freeze({
-  brainerce: "^1.23.0",
+  // 1.26 = adds client.content namespace (FAQ / Footer / Header / Announcement /
+  // RichText / Page). Scaffolded stores need this minimum to use the content
+  // components shipped under src/components/content/.
+  brainerce: "^1.26.0",
   "isomorphic-dompurify": "^3.8.0"
 });
 
@@ -332,8 +335,10 @@ async function runInteractive(defaults) {
 var import_path = __toESM(require("path"));
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_ejs = __toESM(require("ejs"));
+var RTL_LANGUAGE_PRIMARIES = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur", "yi"]);
 function getDirection(language) {
-  return language === "he" ? "rtl" : "ltr";
+  const primary = language.split("-")[0].toLowerCase();
+  return RTL_LANGUAGE_PRIMARIES.has(primary) ? "rtl" : "ltr";
 }
 function stripControlChars(value) {
   return value.replace(/\p{Cc}/gu, "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.37.0",
+  "version": "1.40.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/app/faq/page.tsx.ejs

@@ -0,0 +1,46 @@
+/**
+ * FAQ page — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * This page fetches the merchant's *primary* FAQ (key='main'). For topical
+ * FAQs (e.g. /faq/shipping), copy this route to `app/faq/[topic]/page.tsx`
+ * and pass `params.topic` to `client.content.faq.get(topic, locale)`.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { getServerClient } from '@/lib/brainerce';
+import { FaqSection } from '@/components/content/faq-section';
+<% if (i18nEnabled) { %>
+type PageProps = {
+  params: Promise<{ locale: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params;
+  const faq = await getServerClient(locale).content.faq.get('main', locale).catch(() => null);
+  return {
+    title: faq?.name ?? 'FAQ',
+  };
+}
+
+export default async function FaqPage({ params }: PageProps) {
+  const { locale } = await params;
+  const faq = await getServerClient(locale).content.faq.get('main', locale).catch(() => null);
+  return <FaqSection faq={faq} />;
+}
+<% } else { %>
+export async function generateMetadata(): Promise<Metadata> {
+  const faq = await getServerClient().content.faq.get('main').catch(() => null);
+  return {
+    title: faq?.name ?? 'FAQ',
+  };
+}
+
+export default async function FaqPage() {
+  const faq = await getServerClient().content.faq.get('main').catch(() => null);
+  return <FaqSection faq={faq} />;
+}
+<% } %>

package/templates/nextjs/base/src/app/home-client.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Link } from '@/lib/navigation';
+import type { Product, DiscountBanner } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { ProductGrid } from '@/components/products/product-grid';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const [products, setProducts] = useState<Product[]>([]);
+  const [banners, setBanners] = useState<DiscountBanner[]>([]);
+  const [loading, setLoading] = useState(true);
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const client = getClient();
+        const [productsRes, bannersRes] = await Promise.allSettled([
+          client.getProducts({ limit: 8, sortBy: 'createdAt', sortOrder: 'desc' }),
+          client.getDiscountBanners(),
+        ]);
+
+        if (productsRes.status === 'fulfilled') {
+          setProducts(productsRes.value.data);
+        }
+        if (bannersRes.status === 'fulfilled') {
+          setBanners(bannersRes.value);
+        }
+      } catch (err) {
+        console.error('Failed to load home page data:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    load();
+  }, []);
+
+  if (storeLoading || loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Discount Banners */}
+      {banners.length > 0 && (
+        <div className="bg-primary text-primary-foreground">
+          <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
+            <div className="flex items-center justify-center gap-4 overflow-x-auto text-sm font-medium">
+              {banners.map((banner) => (
+                <span key={banner.ruleId}>{banner.text}</span>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Hero Section */}
+      <section className="bg-muted">
+        <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
+          <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
+            {t('welcomeTo')} {storeInfo?.name || tc('store')}
+          </h1>
+          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
+            {t('heroSubtitle')}
+          </p>
+          <Link
+            href="/products"
+            className="bg-primary text-primary-foreground mt-8 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+          >
+            {tc('shopNow')}
+          </Link>
+        </div>
+      </section>
+
+      {/* Featured Products */}
+      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div className="mb-8 flex items-center justify-between">
+          <h2 className="text-foreground text-2xl font-bold">{t('featuredProducts')}</h2>
+          <Link href="/products" className="text-primary text-sm font-medium hover:underline">
+            {tc('viewAll')}
+          </Link>
+        </div>
+        <ProductGrid products={products} />
+      </section>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/layout.tsx.ejs

@@ -2,8 +2,10 @@
 import type { Metadata } from 'next';
 <%- fontImport %>
 import { StoreProvider } from '@/providers/store-provider';
-import { Header } from '@/components/layout/header';
-import { Footer } from '@/components/layout/footer';
+import { AnnouncementBar } from '@/components/content/announcement-bar';
+import { SiteHeader } from '@/components/content/site-header';
+import { SiteFooter } from '@/components/content/site-footer';
+import { getServerClient } from '@/lib/brainerce';
 import { getDirection, supportedLocales } from '@/i18n';
 import { getNonce } from '@/lib/nonce';
 import '../globals.css';
@@ -54,6 +56,17 @@ export default async function RootLayout({
   const dir = getDirection(locale);
   const nonce = await getNonce();
 
+  // Merchant-driven layout chrome — fetched server-side. Each call falls back
+  // to null/[] on 404 so the layout never crashes when the merchant hasn't
+  // seeded a particular content type yet. New stores ship with default rows
+  // seeded by the backend (StoresService.seedDefaultContent).
+  const client = getServerClient(locale);
+  const [announcements, siteHeader, siteFooter] = await Promise.all([
+    client.content.announcement.list(locale).catch(() => []),
+    client.content.header.get('main', locale).catch(() => null),
+    client.content.footer.get('main', locale).catch(() => null),
+  ]);
+
   return (
     <html lang={locale} dir={dir}>
       <head>
@@ -72,9 +85,10 @@ export default async function RootLayout({
       <body className={font.className}>
         <StoreProvider locale={locale}>
           <div className="min-h-screen flex flex-col">
-            <Header />
+            <AnnouncementBar announcements={announcements} />
+            <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
             <main className="flex-1">{children}</main>
-            <Footer />
+            <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
           </div>
         </StoreProvider>
       </body>
@@ -85,8 +99,10 @@ export default async function RootLayout({
 import type { Metadata } from 'next';
 <%- fontImport %>
 import { StoreProvider } from '@/providers/store-provider';
-import { Header } from '@/components/layout/header';
-import { Footer } from '@/components/layout/footer';
+import { AnnouncementBar } from '@/components/content/announcement-bar';
+import { SiteHeader } from '@/components/content/site-header';
+import { SiteFooter } from '@/components/content/site-footer';
+import { getServerClient } from '@/lib/brainerce';
 import { getNonce } from '@/lib/nonce';
 import './globals.css';
 
@@ -128,6 +144,18 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   const nonce = await getNonce();
+
+  // Merchant-driven layout chrome — fetched server-side. Each call falls back
+  // to null/[] on 404 so the layout never crashes when the merchant hasn't
+  // seeded a particular content type yet. New stores ship with default rows
+  // seeded by the backend (StoresService.seedDefaultContent).
+  const client = getServerClient();
+  const [announcements, siteHeader, siteFooter] = await Promise.all([
+    client.content.announcement.list().catch(() => []),
+    client.content.header.get('main').catch(() => null),
+    client.content.footer.get('main').catch(() => null),
+  ]);
+
   return (
     <html lang="<%= language %>" dir="<%= direction %>">
       <head>
@@ -146,9 +174,10 @@ export default async function RootLayout({
       <body className={font.className}>
         <StoreProvider>
           <div className="min-h-screen flex flex-col">
-            <Header />
+            <AnnouncementBar announcements={announcements} />
+            <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
             <main className="flex-1">{children}</main>
-            <Footer />
+            <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
           </div>
         </StoreProvider>
       </body>

package/templates/nextjs/base/src/app/page.tsx

@@ -1,98 +1,53 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Link } from '@/lib/navigation';
-import type { Product, DiscountBanner } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
-import { ProductGrid } from '@/components/products/product-grid';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-
-export default function HomePage() {
-  const { storeInfo, loading: storeLoading } = useStoreInfo();
-  const [products, setProducts] = useState<Product[]>([]);
-  const [banners, setBanners] = useState<DiscountBanner[]>([]);
-  const [loading, setLoading] = useState(true);
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const client = getClient();
-        const [productsRes, bannersRes] = await Promise.allSettled([
-          client.getProducts({ limit: 8, sortBy: 'createdAt', sortOrder: 'desc' }),
-          client.getDiscountBanners(),
-        ]);
-
-        if (productsRes.status === 'fulfilled') {
-          setProducts(productsRes.value.data);
-        }
-        if (bannersRes.status === 'fulfilled') {
-          setBanners(bannersRes.value);
-        }
-      } catch (err) {
-        console.error('Failed to load home page data:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    load();
-  }, []);
-
-  if (storeLoading || loading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {/* Discount Banners */}
-      {banners.length > 0 && (
-        <div className="bg-primary text-primary-foreground">
-          <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
-            <div className="flex items-center justify-center gap-4 overflow-x-auto text-sm font-medium">
-              {banners.map((banner) => (
-                <span key={banner.ruleId}>{banner.text}</span>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Hero Section */}
-      <section className="bg-muted">
-        <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
-          <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
-            {t('welcomeTo')} {storeInfo?.name || tc('store')}
-          </h1>
-          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
-            {t('heroSubtitle')}
-          </p>
-          <Link
-            href="/products"
-            className="bg-primary text-primary-foreground mt-8 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-          >
-            {tc('shopNow')}
-          </Link>
-        </div>
-      </section>
-
-      {/* Featured Products */}
-      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-        <div className="mb-8 flex items-center justify-between">
-          <h2 className="text-foreground text-2xl font-bold">{t('featuredProducts')}</h2>
-          <Link href="/products" className="text-primary text-sm font-medium hover:underline">
-            {tc('viewAll')}
-          </Link>
-        </div>
-        <ProductGrid products={products} />
-      </section>
-    </div>
-  );
-}
+import type { Metadata } from 'next';
+import { getServerClient } from '@/lib/brainerce';
+import { buildMetaDescription } from '@/lib/seo';
+import { OrganizationJsonLd } from '@/components/seo/organization-json-ld';
+import { HomeClient } from './home-client';
+
+// Build homepage metadata server-side so Google, Facebook, WhatsApp etc.
+// see a real <meta name="description"> on first request. Falls back to the
+// store name when the merchant hasn't authored a meta description yet.
+export async function generateMetadata(): Promise<Metadata> {
+  try {
+    const storeInfo = await getServerClient().getStoreInfo();
+    const description = buildMetaDescription(storeInfo.metaDescription) || undefined;
+    return {
+      title: storeInfo.name,
+      description,
+      openGraph: {
+        title: storeInfo.name,
+        description,
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: storeInfo.name,
+        description,
+      },
+    };
+  } catch {
+    return {};
+  }
+}
+
+export default async function HomePage() {
+  // Fetch store info server-side so the JSON-LD is in the initial HTML —
+  // crawlers and AI Overviews see it without needing to execute JavaScript.
+  // Failure here is non-fatal: the client component re-fetches via the
+  // StoreProvider so the page still renders.
+  let storeInfo = null;
+  try {
+    storeInfo = await getServerClient().getStoreInfo();
+  } catch {
+    storeInfo = null;
+  }
+
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  return (
+    <>
+      {storeInfo && baseUrl ? <OrganizationJsonLd storeInfo={storeInfo} baseUrl={baseUrl} /> : null}
+      <HomeClient />
+    </>
+  );
+}

package/templates/nextjs/base/src/app/pages/[slug]/page.tsx.ejs

@@ -0,0 +1,87 @@
+/**
+ * Static page route — fully driven by the merchant's dashboard.
+ *
+ * The merchant creates pages in the Brainerce dashboard under
+ *   Sell → Content → Page (one row per page, each with its own `slug`)
+ *
+ * This catch-all renders any PAGE by its `data.slug`. `/pages/about` →
+ * fetches PAGE with slug='about'. Mounting under `/pages/` (rather than
+ * the root) keeps the route from clashing with existing static routes
+ * like /cart, /login, /products.
+ *
+ * Security: page HTML is sanitized via `sanitizeHtml` before injecting.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { getServerClient } from '@/lib/brainerce';
+import { sanitizeHtml } from '@/lib/sanitize';
+
+<% if (i18nEnabled) { %>
+type PageProps = {
+  params: Promise<{ locale: string; slug: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale, slug } = await params;
+  const page = await getServerClient(locale).content.page.getBySlug(slug, locale).catch(() => null);
+  if (!page) return { title: slug };
+  const seo = page.data.seo ?? {};
+  return {
+    title: seo.title ?? page.data.title,
+    description: seo.description,
+    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
+  };
+}
+
+export default async function StaticPage({ params }: PageProps) {
+  const { locale, slug } = await params;
+  const page = await getServerClient(locale).content.page.getBySlug(slug, locale).catch(() => null);
+  if (!page) notFound();
+  return (
+    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
+        {page.data.title}
+      </h1>
+      <div
+        className="prose prose-sm dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
+      />
+    </article>
+  );
+}
+<% } else { %>
+type PageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const page = await getServerClient().content.page.getBySlug(slug).catch(() => null);
+  if (!page) return { title: slug };
+  const seo = page.data.seo ?? {};
+  return {
+    title: seo.title ?? page.data.title,
+    description: seo.description,
+    openGraph: seo.ogImage ? { images: [{ url: seo.ogImage }] } : undefined,
+  };
+}
+
+export default async function StaticPage({ params }: PageProps) {
+  const { slug } = await params;
+  const page = await getServerClient().content.page.getBySlug(slug).catch(() => null);
+  if (!page) notFound();
+  return (
+    <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">
+        {page.data.title}
+      </h1>
+      <div
+        className="prose prose-sm dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(page.data.html) }}
+      />
+    </article>
+  );
+}
+<% } %>

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getServerClient } from '@/lib/brainerce';
+import { buildMetaDescription } from '@/lib/seo';
 import { ProductJsonLd } from '@/components/seo/product-json-ld';
 import { ReviewsSection } from '@/components/reviews/reviews-section';
 import { ProductClientSection } from './product-client-section';
@@ -16,12 +17,13 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     const client = getServerClient(locale);
     const product = await client.getProductBySlug(slug);
     const imageUrl = product.images?.[0]?.url;
-    // Prefer merchant-authored SEO copy; fall back to the visible name/description.
-    // Both are served already locale-resolved by the backend.
+    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
+    // version of the visible description, then product name. We must NEVER
+    // emit raw HTML or a mid-word cut into <meta name="description">.
     const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
     const seoDescription =
       (product as { seoDescription?: string | null }).seoDescription ||
-      product.description?.substring(0, 160) ||
+      buildMetaDescription(product.description) ||
       product.name;
 
     return {

package/templates/nextjs/base/src/components/content/announcement-bar.tsx.ejs

@@ -0,0 +1,125 @@
+/**
+ * Storefront announcement bar — fully driven by the merchant's dashboard.
+ *
+ * The merchant configures announcements in the Brainerce dashboard under
+ *   Sell → Content → Announcement
+ *
+ * Everything below is generic rendering logic — it adapts automatically to
+ * any announcement shape returned by the API, so **you should not hardcode
+ * the message or severity here**.
+ *
+ * API contract:
+ *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
+ *   Empty array → renders nothing (page layout stays intact).
+ *
+ * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
+ * timestamps. We filter client-side so the cached server response can be
+ * shared across visitors regardless of the current time.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+interface AnnouncementBarProps {
+  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
+  announcements: Content<'ANNOUNCEMENT'>[];
+}
+
+const SEVERITY_STYLES: Record<'info' | 'warning' | 'success', string> = {
+  info: 'bg-blue-600 text-white',
+  warning: 'bg-amber-500 text-amber-950',
+  success: 'bg-emerald-600 text-white',
+};
+
+const STORAGE_KEY = 'brainerce_dismissed_announcements';
+
+export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
+  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
+
+  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
+    } catch {
+      // ignore malformed storage
+    }
+  }, []);
+
+  const dismiss = (id: string) => {
+    setDismissed((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
+        } catch {
+          // ignore quota errors
+        }
+      }
+      return next;
+    });
+  };
+
+  const now = Date.now();
+  const visible = announcements.filter((a) => {
+    if (dismissed.has(a.id)) return false;
+    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
+    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
+    return startOk && endOk;
+  });
+
+  if (visible.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Site announcements">
+      {visible.map((announcement) => {
+        const severity = announcement.data.severity;
+        const tone = SEVERITY_STYLES[severity] ?? SEVERITY_STYLES.info;
+        return (
+          <div
+            key={announcement.id}
+            className={`flex items-center justify-center gap-3 px-4 py-2 text-sm ${tone}`}
+          >
+            <span className="flex-1 text-center">
+              {announcement.data.message}
+              {announcement.data.ctaHref && announcement.data.ctaLabel ? (
+                <>
+                  {' '}
+                  <a
+                    href={announcement.data.ctaHref}
+                    className="underline underline-offset-2"
+                  >
+                    {announcement.data.ctaLabel}
+                  </a>
+                </>
+              ) : null}
+            </span>
+            {announcement.data.dismissible ? (
+              <button
+                type="button"
+                onClick={() => dismiss(announcement.id)}
+                aria-label="Dismiss announcement"
+                className="text-current opacity-80 transition-opacity hover:opacity-100"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  className="h-4 w-4"
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}