create-brainerce-store 1.65.0 → 1.67.0

package/templates/nextjs/designs/atelier/ui/layout/faq-section.tsx

@@ -1,96 +1,97 @@
-/**
- * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
- * configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
- * pre-fetched payload as `faq`; this component knows nothing about which
- * key it came from.
- *
- * Two render branches:
- *   1. `faq` has items → accordion of question/answer pairs
- *   2. `faq` is null OR has no items → friendly empty state with a contact
- *      CTA, so the /faq page never looks broken before the merchant seeds.
- *
- * Security: FAQ answers may contain merchant-authored HTML — we sanitize
- * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-
-interface FaqSectionProps {
-  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
-  faq: Content<'FAQ'> | null;
-}
-
-export function FaqSection({ faq }: FaqSectionProps) {
-  const t = useTranslations('content');
-
-  const items = faq?.data?.items ?? [];
-  const heading = faq?.name || t('faqTitle');
-
-  // Empty state — runs when the merchant hasn't created a FAQ row yet,
-  // or the row exists but contains no items.
-  if (!faq || items.length === 0) {
-    return (
-      <section className="container-page py-16 lg:py-24">
-        <div className="card mx-auto flex max-w-lg flex-col items-center gap-3 px-8 py-14 text-center">
-          <h1 className="text-3xl">{heading}</h1>
-          <p className="text-muted-foreground">
-            <strong className="mb-1 block font-semibold text-foreground">
-              {t('faqEmptyTitle')}
-            </strong>
-            {t('faqEmptyBody')}
-          </p>
-          <a href="/contact" className="btn-primary btn-md mt-3">
-            {t('faqContactCta')}
-          </a>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="container-page max-w-3xl py-14 lg:py-20">
-      <h1 className="mb-8 text-center text-3xl sm:text-4xl">{heading}</h1>
-      <ul className="space-y-3">
-        {items.map((item, idx) => (
-          <li key={idx}>
-            <details open={idx === 0} className="group card overflow-hidden">
-              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-sans text-[15px] font-semibold text-foreground transition-colors hover:bg-secondary/60 [&::-webkit-details-marker]:hidden">
-                {item.question}
-                <span
-                  aria-hidden="true"
-                  className="shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
-                >
-                  <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.75"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <path d="m6 9 6 6 6-6" />
-                  </svg>
-                </span>
-              </summary>
-              <div
-                className="prose-store border-t px-5 py-4"
-                dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
-              />
-            </details>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
+/**
+ * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
+ * configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
+ * pre-fetched payload as `faq`; this component knows nothing about which
+ * key it came from.
+ *
+ * Two render branches:
+ *   1. `faq` has items → accordion of question/answer pairs
+ *   2. `faq` is null OR has no items → friendly empty state with a contact
+ *      CTA, so the /faq page never looks broken before the merchant seeds.
+ *
+ * Security: FAQ answers may contain merchant-authored HTML — we sanitize
+ * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
+ */
+'use client';
+
+import * as React from 'react';
+import { Link } from '@/core/lib/navigation';
+import type { Content } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+
+interface FaqSectionProps {
+  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
+  faq: Content<'FAQ'> | null;
+}
+
+export function FaqSection({ faq }: FaqSectionProps) {
+  const t = useTranslations('content');
+
+  const items = faq?.data?.items ?? [];
+  const heading = faq?.name || t('faqTitle');
+
+  // Empty state — runs when the merchant hasn't created a FAQ row yet,
+  // or the row exists but contains no items.
+  if (!faq || items.length === 0) {
+    return (
+      <section className="container-page py-16 lg:py-24">
+        <div className="card mx-auto flex max-w-lg flex-col items-center gap-3 px-8 py-14 text-center">
+          <h1 className="text-3xl">{heading}</h1>
+          <p className="text-muted-foreground">
+            <strong className="text-foreground mb-1 block font-semibold">
+              {t('faqEmptyTitle')}
+            </strong>
+            {t('faqEmptyBody')}
+          </p>
+          <Link href="/contact" className="btn-primary btn-md mt-3">
+            {t('faqContactCta')}
+          </Link>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="container-page max-w-3xl py-14 lg:py-20">
+      <h1 className="mb-8 text-center text-3xl sm:text-4xl">{heading}</h1>
+      <ul className="space-y-3">
+        {items.map((item, idx) => (
+          <li key={idx}>
+            <details open={idx === 0} className="card group overflow-hidden">
+              <summary className="text-foreground hover:bg-secondary/60 flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-sans text-[15px] font-semibold transition-colors [&::-webkit-details-marker]:hidden">
+                {item.question}
+                <span
+                  aria-hidden="true"
+                  className="text-muted-foreground shrink-0 transition-transform duration-200 group-open:rotate-180"
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.75"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                </span>
+              </summary>
+              <div
+                className="prose-store border-t px-5 py-4"
+                dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
+              />
+            </details>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

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

@@ -1,141 +1,142 @@
-/**
- * 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 { Link } from '@/core/lib/navigation';
+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">
+          <Link href="/" className="font-display text-2xl font-semibold">
+            {brandLabel}
+          </Link>
+          <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>
+  );
+}