create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/designs/atelier/ui/layout/site-footer.tsx.ejs

@@ -1,141 +1,141 @@
-/**
- * Storefront footer — driven by the merchant's dashboard configuration
- * (Sell → Content → Footer), rendered as a deep-forest "signature" band:
- * brand block + tagline + social, merchant link columns, copyright bar.
- *
- * API contract:
- *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
- *   Returns null on 404 — the fallback branch renders the same designed
- *   chrome with essential storefront links so the page never looks broken.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-<% if (i18nEnabled) { %>
-import { getMessages, defaultLocale } from '@/i18n';
-<% } else { %>
-import { messages as staticMessages, defaultLocale } from '@/i18n';
-<% } %>
-import { IconSocial, IconShield } from '@/ui/shared/icons';
-import { resolveNavUrl } from '@/ui/layout/nav-url';
-
-interface SiteFooterProps {
-  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
-  footer: Content<'FOOTER'> | null;
-  /** Store name shown in the brand block + fallback copyright. */
-  storeName?: string;
-  /** Store locale for the translation-key copy (server component). */
-  locale?: string;
-}
-
-export async function SiteFooter({ footer, storeName, locale = defaultLocale }: SiteFooterProps) {
-<% if (i18nEnabled) { %>
-  const messages = await getMessages(locale);
-<% } else { %>
-  const messages = staticMessages;
-<% } %>
-  const t = (messages.footer ?? {}) as Record<string, string>;
-
-  const data = footer?.data;
-  const columns = data?.columns ?? [];
-  const social = data?.social ?? [];
-  const year = new Date().getFullYear();
-  const brandLabel = storeName ?? 'Store';
-
-  const fallbackLinks = [
-    { url: '/products', label: t.linkProducts },
-    { url: '/faq', label: t.linkFaq },
-    { url: '/contact', label: t.linkContact },
-    { url: '/cart', label: t.linkCart },
-  ];
-
-  return (
-    <footer className="mt-auto bg-primary text-primary-foreground">
-      <div className="container-page grid gap-10 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:py-16">
-        {/* Brand block */}
-        <div className="sm:col-span-2 lg:col-span-2 lg:pe-16">
-          <a href="/" className="font-display text-2xl font-semibold">
-            {brandLabel}
-          </a>
-          <p className="mt-3 max-w-sm text-sm leading-6 text-primary-foreground/70">
-            {t.tagline}
-          </p>
-
-          {social.length > 0 && (
-            <div className="mt-6">
-              <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-foreground/60">
-                {t.followUs}
-              </p>
-              <ul className="flex flex-wrap items-center gap-2">
-                {social.map((entry, idx) => (
-                  <li key={`${entry.platform}-${idx}`}>
-                    <a
-                      href={entry.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={entry.platform}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-primary-foreground/25 text-primary-foreground/85 transition-colors hover:bg-primary-foreground hover:text-primary"
-                    >
-                      <IconSocial platform={entry.platform} size={20} />
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-
-        {/* Merchant link columns (or essential fallback links) */}
-        {columns.length > 0 ? (
-          columns.map((col, idx) => (
-            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
-              <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
-                {col.title}
-              </h3>
-              <ul className="space-y-2.5">
-                {col.links.map((link, linkIdx) => (
-                  <li key={`${link.url}-${linkIdx}`}>
-                    <a
-                      href={resolveNavUrl(link.url)}
-                      className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          ))
-        ) : (
-          <nav aria-label={t.quickLinksTitle}>
-            <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
-              {t.quickLinksTitle}
-            </h3>
-            <ul className="space-y-2.5">
-              {fallbackLinks.map((link) => (
-                <li key={link.url}>
-                  <a
-                    href={link.url}
-                    className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
-                  >
-                    {link.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        )}
-      </div>
-
-      {/* Bottom bar */}
-      <div className="border-t border-primary-foreground/15">
-        <div className="container-page flex flex-col items-center justify-between gap-3 py-5 text-xs text-primary-foreground/60 sm:flex-row">
-          <p>{data?.copyright ?? `© ${year} ${brandLabel}. ${messages.common?.allRightsReserved ?? ''}`}</p>
-          <p className="inline-flex items-center gap-1.5">
-            <IconShield size={16} />
-            {t.securePayments}
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-}
+/**
+ * Storefront footer — driven by the merchant's dashboard configuration
+ * (Sell → Content → Footer), rendered as a deep-forest "signature" band:
+ * brand block + tagline + social, merchant link columns, copyright bar.
+ *
+ * API contract:
+ *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
+ *   Returns null on 404 — the fallback branch renders the same designed
+ *   chrome with essential storefront links so the page never looks broken.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+<% if (i18nEnabled) { %>
+import { getMessages, defaultLocale } from '@/i18n';
+<% } else { %>
+import { messages as staticMessages, defaultLocale } from '@/i18n';
+<% } %>
+import { IconSocial, IconShield } from '@/ui/shared/icons';
+import { resolveNavUrl } from '@/ui/layout/nav-url';
+
+interface SiteFooterProps {
+  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
+  footer: Content<'FOOTER'> | null;
+  /** Store name shown in the brand block + fallback copyright. */
+  storeName?: string;
+  /** Store locale for the translation-key copy (server component). */
+  locale?: string;
+}
+
+export async function SiteFooter({ footer, storeName, locale = defaultLocale }: SiteFooterProps) {
+<% if (i18nEnabled) { %>
+  const messages = await getMessages(locale);
+<% } else { %>
+  const messages = staticMessages;
+<% } %>
+  const t = (messages.footer ?? {}) as Record<string, string>;
+
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
+
+  const fallbackLinks = [
+    { url: '/products', label: t.linkProducts },
+    { url: '/faq', label: t.linkFaq },
+    { url: '/contact', label: t.linkContact },
+    { url: '/cart', label: t.linkCart },
+  ];
+
+  return (
+    <footer className="mt-auto bg-primary text-primary-foreground">
+      <div className="container-page grid gap-10 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:py-16">
+        {/* Brand block */}
+        <div className="sm:col-span-2 lg:col-span-2 lg:pe-16">
+          <a href="/" className="font-display text-2xl font-semibold">
+            {brandLabel}
+          </a>
+          <p className="mt-3 max-w-sm text-sm leading-6 text-primary-foreground/70">
+            {t.tagline}
+          </p>
+
+          {social.length > 0 && (
+            <div className="mt-6">
+              <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-foreground/60">
+                {t.followUs}
+              </p>
+              <ul className="flex flex-wrap items-center gap-2">
+                {social.map((entry, idx) => (
+                  <li key={`${entry.platform}-${idx}`}>
+                    <a
+                      href={entry.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label={entry.platform}
+                      className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-primary-foreground/25 text-primary-foreground/85 transition-colors hover:bg-primary-foreground hover:text-primary"
+                    >
+                      <IconSocial platform={entry.platform} size={20} />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        {/* Merchant link columns (or essential fallback links) */}
+        {columns.length > 0 ? (
+          columns.map((col, idx) => (
+            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
+              <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
+                {col.title}
+              </h3>
+              <ul className="space-y-2.5">
+                {col.links.map((link, linkIdx) => (
+                  <li key={`${link.url}-${linkIdx}`}>
+                    <a
+                      href={resolveNavUrl(link.url)}
+                      className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))
+        ) : (
+          <nav aria-label={t.quickLinksTitle}>
+            <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
+              {t.quickLinksTitle}
+            </h3>
+            <ul className="space-y-2.5">
+              {fallbackLinks.map((link) => (
+                <li key={link.url}>
+                  <a
+                    href={link.url}
+                    className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </div>
+
+      {/* Bottom bar */}
+      <div className="border-t border-primary-foreground/15">
+        <div className="container-page flex flex-col items-center justify-between gap-3 py-5 text-xs text-primary-foreground/60 sm:flex-row">
+          <p>{data?.copyright ?? `© ${year} ${brandLabel}. ${messages.common?.allRightsReserved ?? ''}`}</p>
+          <p className="inline-flex items-center gap-1.5">
+            <IconShield size={16} />
+            {t.securePayments}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/site-header.tsx.ejs

@@ -1,138 +1,138 @@
-/**
- * Merchant-controlled site header.
- *
- * The merchant configures the header in the Brainerce dashboard under
- *   Sell → Content → Header
- *
- * Sticky, translucent warm-white bar: brand (serif) at the start, nav in the
- * middle (desktop), actions at the end (language / account / cart / mobile
- * menu). Everything is generic — nav labels and logo come from the dashboard.
- * If `header` is null we render the same chrome with just brand + actions so
- * the layout never collapses.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { HeaderAccount } from './header-account';
-import { HeaderCart } from './header-cart';
-<% if (i18nEnabled) { %>
-import { LanguageSwitcher } from '@/ui/layout/language-switcher';
-<% } %>
-import { IconMenu } from '@/ui/shared/icons';
-import { resolveNavUrl } from '@/ui/layout/nav-url';
-
-interface SiteHeaderProps {
-  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
-  header: Content<'HEADER'> | null;
-  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
-  storeName?: string;
-}
-
-function Brand({
-  logo,
-  brandLabel,
-}: {
-  logo?: { src: string; alt: string } | null;
-  brandLabel: string;
-}) {
-  return (
-    <a
-      href="/"
-      aria-label={brandLabel}
-      className="flex shrink-0 items-center gap-2 rounded-lg"
-    >
-      {logo ? (
-        // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
-        <img src={logo.src} alt={logo.alt} className="h-9 w-auto object-contain" />
-      ) : (
-        <span className="font-display text-xl font-semibold leading-none text-foreground sm:text-2xl">
-          {brandLabel}
-        </span>
-      )}
-    </a>
-  );
-}
-
-export function SiteHeader({ header, storeName }: SiteHeaderProps) {
-  const data = header?.data;
-  const logo = data?.logo;
-  const navItems = data?.navItems ?? [];
-  const cta = data?.cta;
-  const brandLabel = logo?.alt || storeName || 'Store';
-
-  return (
-    <header className="sticky top-0 z-40 border-b bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-      <div className="container-page flex h-16 items-center justify-between gap-4 sm:h-[4.5rem]">
-        <Brand logo={logo ?? null} brandLabel={brandLabel} />
-
-        {navItems.length > 0 && (
-          <nav aria-label="Main" className="hidden md:block">
-            <ul className="flex items-center gap-1">
-              {navItems.map((item, idx) => (
-                <li key={`${item.url}-${idx}`}>
-                  <a
-                    href={resolveNavUrl(item.url)}
-                    className="rounded-full px-4 py-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-secondary hover:text-foreground"
-                  >
-                    {item.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        )}
-
-        <div className="flex items-center gap-1 sm:gap-2">
-          {cta ? (
-            <a href={resolveNavUrl(cta.url)} className="btn-primary btn-sm hidden lg:inline-flex">
-              {cta.label}
-            </a>
-          ) : null}
-<% if (i18nEnabled) { %>
-
-          <LanguageSwitcher />
-<% } %>
-          <HeaderAccount />
-          <HeaderCart />
-
-          {navItems.length > 0 && (
-            <details className="group relative md:hidden">
-              <summary
-                className="flex h-10 w-10 cursor-pointer list-none items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary [&::-webkit-details-marker]:hidden"
-                aria-label="Menu"
-              >
-                <IconMenu size={20} />
-              </summary>
-              <nav
-                aria-label="Mobile"
-                className="absolute end-0 top-12 z-50 w-56 rounded-xl border bg-background p-2 shadow-lg"
-              >
-                <ul className="flex flex-col">
-                  {navItems.map((item, idx) => (
-                    <li key={`m-${item.url}-${idx}`}>
-                      <a
-                        href={resolveNavUrl(item.url)}
-                        className="block rounded-lg px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
-                      >
-                        {item.label}
-                      </a>
-                    </li>
-                  ))}
-                  {cta ? (
-                    <li className="mt-1 border-t pt-2">
-                      <a
-                        href={resolveNavUrl(cta.url)}
-                        className="block rounded-lg px-3 py-2.5 text-sm font-semibold text-primary transition-colors hover:bg-secondary"
-                      >
-                        {cta.label}
-                      </a>
-                    </li>
-                  ) : null}
-                </ul>
-              </nav>
-            </details>
-          )}
-        </div>
-      </div>
-    </header>
-  );
-}
+/**
+ * Merchant-controlled site header.
+ *
+ * The merchant configures the header in the Brainerce dashboard under
+ *   Sell → Content → Header
+ *
+ * Sticky, translucent warm-white bar: brand (serif) at the start, nav in the
+ * middle (desktop), actions at the end (language / account / cart / mobile
+ * menu). Everything is generic — nav labels and logo come from the dashboard.
+ * If `header` is null we render the same chrome with just brand + actions so
+ * the layout never collapses.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { HeaderAccount } from './header-account';
+import { HeaderCart } from './header-cart';
+<% if (i18nEnabled) { %>
+import { LanguageSwitcher } from '@/ui/layout/language-switcher';
+<% } %>
+import { IconMenu } from '@/ui/shared/icons';
+import { resolveNavUrl } from '@/ui/layout/nav-url';
+
+interface SiteHeaderProps {
+  /** Pre-fetched header payload (server-side). `null` triggers static fallback. */
+  header: Content<'HEADER'> | null;
+  /** Fallback brand label when the merchant hasn't uploaded a logo yet. */
+  storeName?: string;
+}
+
+function Brand({
+  logo,
+  brandLabel,
+}: {
+  logo?: { src: string; alt: string } | null;
+  brandLabel: string;
+}) {
+  return (
+    <a
+      href="/"
+      aria-label={brandLabel}
+      className="flex shrink-0 items-center gap-2 rounded-lg"
+    >
+      {logo ? (
+        // eslint-disable-next-line @next/next/no-img-element -- merchant-supplied URL, dynamic optimization handled by CDN
+        <img src={logo.src} alt={logo.alt} className="h-9 w-auto object-contain" />
+      ) : (
+        <span className="font-display text-xl font-semibold leading-none text-foreground sm:text-2xl">
+          {brandLabel}
+        </span>
+      )}
+    </a>
+  );
+}
+
+export function SiteHeader({ header, storeName }: SiteHeaderProps) {
+  const data = header?.data;
+  const logo = data?.logo;
+  const navItems = data?.navItems ?? [];
+  const cta = data?.cta;
+  const brandLabel = logo?.alt || storeName || 'Store';
+
+  return (
+    <header className="sticky top-0 z-40 border-b bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <div className="container-page flex h-16 items-center justify-between gap-4 sm:h-[4.5rem]">
+        <Brand logo={logo ?? null} brandLabel={brandLabel} />
+
+        {navItems.length > 0 && (
+          <nav aria-label="Main" className="hidden md:block">
+            <ul className="flex items-center gap-1">
+              {navItems.map((item, idx) => (
+                <li key={`${item.url}-${idx}`}>
+                  <a
+                    href={resolveNavUrl(item.url)}
+                    className="rounded-full px-4 py-2 text-sm font-medium text-foreground/80 transition-colors hover:bg-secondary hover:text-foreground"
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+
+        <div className="flex items-center gap-1 sm:gap-2">
+          {cta ? (
+            <a href={resolveNavUrl(cta.url)} className="btn-primary btn-sm hidden lg:inline-flex">
+              {cta.label}
+            </a>
+          ) : null}
+<% if (i18nEnabled) { %>
+
+          <LanguageSwitcher />
+<% } %>
+          <HeaderAccount />
+          <HeaderCart />
+
+          {navItems.length > 0 && (
+            <details className="group relative md:hidden">
+              <summary
+                className="flex h-10 w-10 cursor-pointer list-none items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary [&::-webkit-details-marker]:hidden"
+                aria-label="Menu"
+              >
+                <IconMenu size={20} />
+              </summary>
+              <nav
+                aria-label="Mobile"
+                className="absolute end-0 top-12 z-50 w-56 rounded-xl border bg-background p-2 shadow-lg"
+              >
+                <ul className="flex flex-col">
+                  {navItems.map((item, idx) => (
+                    <li key={`m-${item.url}-${idx}`}>
+                      <a
+                        href={resolveNavUrl(item.url)}
+                        className="block rounded-lg px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+                      >
+                        {item.label}
+                      </a>
+                    </li>
+                  ))}
+                  {cta ? (
+                    <li className="mt-1 border-t pt-2">
+                      <a
+                        href={resolveNavUrl(cta.url)}
+                        className="block rounded-lg px-3 py-2.5 text-sm font-semibold text-primary transition-colors hover:bg-secondary"
+                      >
+                        {cta.label}
+                      </a>
+                    </li>
+                  ) : null}
+                </ul>
+              </nav>
+            </details>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}