create-brainerce-store 1.61.0 → 1.63.0

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

@@ -1,82 +1,82 @@
-/**
- * Storefront footer (bare skeleton) — fully driven by the merchant's
- * dashboard configuration.
- *
- * The merchant configures the footer in the Brainerce dashboard under
- *   Sell → Content → Footer
- *
- * Renders a brand block (store-name + social links), the merchant's link
- * columns, and a copyright bar.
- *
- * API contract:
- *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
- *   Returns null on 404 — we render a minimal fallback so the layout never
- *   crashes when the merchant hasn't seeded the footer yet.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-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;
-}
-
-export function SiteFooter({ footer, storeName }: SiteFooterProps) {
-  const data = footer?.data;
-  const columns = data?.columns ?? [];
-  const social = data?.social ?? [];
-  const year = new Date().getFullYear();
-  const brandLabel = storeName ?? 'Store';
-
-  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
-    return (
-      <footer>
-        {/* DESIGN ME — footer (fallback branch): copyright only; Content<'FOOTER'> pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <p>
-          © {year} {brandLabel}. All rights reserved.
-        </p>
-      </footer>
-    );
-  }
-
-  return (
-    <footer>
-      {/* DESIGN ME — footer: brand block, merchant link columns and social links (Content<'FOOTER'> pre-fetched in the layout), copyright bar. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <div>
-        <a href="/">{brandLabel}</a>
-        {social.length > 0 ? (
-          <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}>
-                  {entry.platform}
-                </a>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </div>
-
-      {columns.length > 0 ? (
-        <div className="flex flex-wrap gap-8">
-          {columns.map((col, idx) => (
-            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
-              <h3>{col.title}</h3>
-              <ul>
-                {col.links.map((link, linkIdx) => (
-                  <li key={`${link.url}-${linkIdx}`}>
-                    <a href={link.url}>{link.label}</a>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          ))}
-        </div>
-      ) : null}
-
-      <p>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</p>
-    </footer>
-  );
-}
+/**
+ * Storefront footer (bare skeleton) — fully driven by the merchant's
+ * dashboard configuration.
+ *
+ * The merchant configures the footer in the Brainerce dashboard under
+ *   Sell → Content → Footer
+ *
+ * Renders a brand block (store-name + social links), the merchant's link
+ * columns, and a copyright bar.
+ *
+ * API contract:
+ *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
+ *   Returns null on 404 — we render a minimal fallback so the layout never
+ *   crashes when the merchant hasn't seeded the footer yet.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+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;
+}
+
+export function SiteFooter({ footer, storeName }: SiteFooterProps) {
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
+
+  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
+    return (
+      <footer>
+        {/* DESIGN ME — footer (fallback branch): copyright only; Content<'FOOTER'> pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <p>
+          © {year} {brandLabel}. All rights reserved.
+        </p>
+      </footer>
+    );
+  }
+
+  return (
+    <footer>
+      {/* DESIGN ME — footer: brand block, merchant link columns and social links (Content<'FOOTER'> pre-fetched in the layout), copyright bar. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <div>
+        <a href="/">{brandLabel}</a>
+        {social.length > 0 ? (
+          <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}>
+                  {entry.platform}
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+
+      {columns.length > 0 ? (
+        <div className="flex flex-wrap gap-8">
+          {columns.map((col, idx) => (
+            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
+              <h3>{col.title}</h3>
+              <ul>
+                {col.links.map((link, linkIdx) => (
+                  <li key={`${link.url}-${linkIdx}`}>
+                    <a href={link.url}>{link.label}</a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))}
+        </div>
+      ) : null}
+
+      <p>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</p>
+    </footer>
+  );
+}

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

@@ -1,119 +1,119 @@
-/**
- * Merchant-controlled site header (bare skeleton).
- *
- * The merchant configures the header in the Brainerce dashboard under
- *   Sell → Content → Header
- *
- * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
- * with a `<details>` mobile-friendly menu that works without client-side JS.
- * Everything is generic — do NOT hardcode nav labels or logo paths here; the
- * merchant edits them in the dashboard and the change propagates within ~5
- * minutes.
- *
- * If `header` is null (404 from the API, or the merchant deleted the row),
- * we render a minimal static fallback with just the brand label and cart link
- * so the layout never collapses.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { HeaderAccount } from './header-account';
-<% if (i18nEnabled) { %>
-import { LanguageSwitcher } from '@/ui/layout/language-switcher';
-<% } %>
-
-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;
-}
-
-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';
-
-  // Static fallback — runs when the Content API returned null (no HEADER row
-  // for this store yet, or fetch failed). Keep the brand + cart so the page
-  // always has a clickable home link and entry to checkout.
-  if (!header) {
-    return (
-      <header>
-        {/* DESIGN ME — site header (fallback branch, no merchant nav yet): brand link + account + cart; data comes pre-fetched from the layout via the Content API. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <div className="flex items-center justify-between gap-4">
-          <a href="/" aria-label={brandLabel}>
-            {brandLabel}
-          </a>
-          <div className="flex items-center gap-2">
-            <% if (i18nEnabled) { %>
-            <LanguageSwitcher />
-            <% } %>
-            <HeaderAccount />
-            <a href="/cart" aria-label="Cart">
-              Cart
-            </a>
-          </div>
-        </div>
-      </header>
-    );
-  }
-
-  return (
-    <header>
-      {/* DESIGN ME — site header: merchant-configured logo/nav/CTA (Content<'HEADER'> pre-fetched in the layout) + account + cart links. Keep every link working. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <div className="flex items-center justify-between gap-4">
-        <a href="/" className="flex items-center gap-2" aria-label={brandLabel}>
-          {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} />
-          ) : (
-            <span>{brandLabel}</span>
-          )}
-        </a>
-
-        {navItems.length > 0 ? (
-          <nav aria-label="Main">
-            <ul className="flex items-center gap-4">
-              {navItems.map((item, idx) => (
-                <li key={`${item.url}-${idx}`}>
-                  <a href={item.url}>{item.label}</a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        ) : null}
-
-        <div className="flex items-center gap-2">
-          {cta ? <a href={cta.url}>{cta.label}</a> : null}
-
-          <% if (i18nEnabled) { %>
-          <LanguageSwitcher />
-          <% } %>
-
-          <HeaderAccount />
-
-          <a href="/cart" aria-label="Cart">
-            Cart
-          </a>
-
-          {navItems.length > 0 ? (
-            <details>
-              <summary>Menu</summary>
-              <nav aria-label="Mobile">
-                <ul>
-                  {navItems.map((item, idx) => (
-                    <li key={`m-${item.url}-${idx}`}>
-                      <a href={item.url}>{item.label}</a>
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            </details>
-          ) : null}
-        </div>
-      </div>
-    </header>
-  );
-}
+/**
+ * Merchant-controlled site header (bare skeleton).
+ *
+ * The merchant configures the header in the Brainerce dashboard under
+ *   Sell → Content → Header
+ *
+ * Renders brand (logo or store-name fallback) + nav items + CTA + cart link,
+ * with a `<details>` mobile-friendly menu that works without client-side JS.
+ * Everything is generic — do NOT hardcode nav labels or logo paths here; the
+ * merchant edits them in the dashboard and the change propagates within ~5
+ * minutes.
+ *
+ * If `header` is null (404 from the API, or the merchant deleted the row),
+ * we render a minimal static fallback with just the brand label and cart link
+ * so the layout never collapses.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { HeaderAccount } from './header-account';
+<% if (i18nEnabled) { %>
+import { LanguageSwitcher } from '@/ui/layout/language-switcher';
+<% } %>
+
+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;
+}
+
+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';
+
+  // Static fallback — runs when the Content API returned null (no HEADER row
+  // for this store yet, or fetch failed). Keep the brand + cart so the page
+  // always has a clickable home link and entry to checkout.
+  if (!header) {
+    return (
+      <header>
+        {/* DESIGN ME — site header (fallback branch, no merchant nav yet): brand link + account + cart; data comes pre-fetched from the layout via the Content API. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <div className="flex items-center justify-between gap-4">
+          <a href="/" aria-label={brandLabel}>
+            {brandLabel}
+          </a>
+          <div className="flex items-center gap-2">
+            <% if (i18nEnabled) { %>
+            <LanguageSwitcher />
+            <% } %>
+            <HeaderAccount />
+            <a href="/cart" aria-label="Cart">
+              Cart
+            </a>
+          </div>
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header>
+      {/* DESIGN ME — site header: merchant-configured logo/nav/CTA (Content<'HEADER'> pre-fetched in the layout) + account + cart links. Keep every link working. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <div className="flex items-center justify-between gap-4">
+        <a href="/" className="flex items-center gap-2" aria-label={brandLabel}>
+          {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} />
+          ) : (
+            <span>{brandLabel}</span>
+          )}
+        </a>
+
+        {navItems.length > 0 ? (
+          <nav aria-label="Main">
+            <ul className="flex items-center gap-4">
+              {navItems.map((item, idx) => (
+                <li key={`${item.url}-${idx}`}>
+                  <a href={item.url}>{item.label}</a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+
+        <div className="flex items-center gap-2">
+          {cta ? <a href={cta.url}>{cta.label}</a> : null}
+
+          <% if (i18nEnabled) { %>
+          <LanguageSwitcher />
+          <% } %>
+
+          <HeaderAccount />
+
+          <a href="/cart" aria-label="Cart">
+            Cart
+          </a>
+
+          {navItems.length > 0 ? (
+            <details>
+              <summary>Menu</summary>
+              <nav aria-label="Mobile">
+                <ul>
+                  {navItems.map((item, idx) => (
+                    <li key={`m-${item.url}-${idx}`}>
+                      <a href={item.url}>{item.label}</a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            </details>
+          ) : null}
+        </div>
+      </div>
+    </header>
+  );
+}