create-brainerce-store 1.30.0 → 1.31.2

package/templates/nextjs/base/src/components/account/order-customizations.tsx

@@ -1,125 +1,125 @@
-'use client';
-
-import Image from 'next/image';
-import type { OrderItem } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-type Customizations = NonNullable<OrderItem['customizations']>;
-type CustomizationEntry = Customizations[string];
-
-interface OrderCustomizationsProps {
-  customizations: OrderItem['customizations'];
-  className?: string;
-}
-
-export function OrderCustomizations({ customizations, className }: OrderCustomizationsProps) {
-  const t = useTranslations('account');
-  if (!customizations) return null;
-  const entries = Object.entries(customizations) as Array<[string, CustomizationEntry]>;
-  if (entries.length === 0) return null;
-
-  return (
-    <dl className={cn('bg-background/60 mt-2 space-y-1 rounded border-s-2 p-2 text-xs', className)}>
-      {entries.map(([key, entry]) => (
-        <div key={key} className="flex items-start gap-2">
-          <dt className="text-muted-foreground min-w-24 font-medium">{entry.label}:</dt>
-          <dd className="text-foreground flex-1 break-words">
-            <CustomizationValue entry={entry} fallback={t('productFallback')} />
-          </dd>
-        </div>
-      ))}
-    </dl>
-  );
-}
-
-function CustomizationValue({ entry, fallback }: { entry: CustomizationEntry; fallback: string }) {
-  const { type, value } = entry;
-
-  switch (type) {
-    case 'BOOLEAN':
-      return <span>{value === 'yes' || value === 'true' ? '✓' : '✗'}</span>;
-
-    case 'MULTI_SELECT':
-      return <span>{Array.isArray(value) ? value.join(', ') : String(value)}</span>;
-
-    case 'IMAGE': {
-      const url = typeof value === 'string' ? value : Array.isArray(value) ? value[0] : '';
-      if (!url) return <span className="text-muted-foreground">—</span>;
-      return (
-        <a href={url} target="_blank" rel="noopener noreferrer" className="inline-block">
-          <span className="relative inline-block h-12 w-12 overflow-hidden rounded border">
-            <Image src={url} alt={fallback} fill sizes="48px" className="object-cover" />
-          </span>
-        </a>
-      );
-    }
-
-    case 'GALLERY': {
-      const urls = Array.isArray(value) ? value : value ? [value] : [];
-      if (urls.length === 0) return <span className="text-muted-foreground">—</span>;
-      return (
-        <div className="flex flex-wrap gap-1.5">
-          {urls.map((url, i) => (
-            <a
-              key={`${url}-${i}`}
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-block"
-            >
-              <span className="relative inline-block h-10 w-10 overflow-hidden rounded border">
-                <Image src={url} alt={fallback} fill sizes="40px" className="object-cover" />
-              </span>
-            </a>
-          ))}
-        </div>
-      );
-    }
-
-    case 'COLOR': {
-      const hex = typeof value === 'string' ? value : '';
-      return (
-        <span className="inline-flex items-center gap-1.5">
-          <span
-            className="inline-block h-4 w-4 rounded border"
-            style={{ backgroundColor: hex || 'transparent' }}
-          />
-          <span className="font-mono">{hex || '—'}</span>
-        </span>
-      );
-    }
-
-    case 'DATE': {
-      const s = typeof value === 'string' ? value : '';
-      if (!s) return <span>—</span>;
-      const d = new Date(s);
-      return <span>{isNaN(d.getTime()) ? s : d.toLocaleDateString()}</span>;
-    }
-
-    case 'DATETIME': {
-      const s = typeof value === 'string' ? value : '';
-      if (!s) return <span>—</span>;
-      const d = new Date(s);
-      return <span>{isNaN(d.getTime()) ? s : d.toLocaleString()}</span>;
-    }
-
-    case 'URL': {
-      const href = typeof value === 'string' ? value : '';
-      if (!href) return <span>—</span>;
-      return (
-        <a
-          href={href}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-primary break-all underline"
-        >
-          {href}
-        </a>
-      );
-    }
-
-    default:
-      return <span>{Array.isArray(value) ? value.join(', ') : String(value ?? '')}</span>;
-  }
-}
+'use client';
+
+import Image from 'next/image';
+import type { OrderItem } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+type Customizations = NonNullable<OrderItem['customizations']>;
+type CustomizationEntry = Customizations[string];
+
+interface OrderCustomizationsProps {
+  customizations: OrderItem['customizations'];
+  className?: string;
+}
+
+export function OrderCustomizations({ customizations, className }: OrderCustomizationsProps) {
+  const t = useTranslations('account');
+  if (!customizations) return null;
+  const entries = Object.entries(customizations) as Array<[string, CustomizationEntry]>;
+  if (entries.length === 0) return null;
+
+  return (
+    <dl className={cn('bg-background/60 mt-2 space-y-1 rounded border-s-2 p-2 text-xs', className)}>
+      {entries.map(([key, entry]) => (
+        <div key={key} className="flex items-start gap-2">
+          <dt className="text-muted-foreground min-w-24 font-medium">{entry.label}:</dt>
+          <dd className="text-foreground flex-1 break-words">
+            <CustomizationValue entry={entry} fallback={t('productFallback')} />
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+function CustomizationValue({ entry, fallback }: { entry: CustomizationEntry; fallback: string }) {
+  const { type, value } = entry;
+
+  switch (type) {
+    case 'BOOLEAN':
+      return <span>{value === 'yes' || value === 'true' ? '✓' : '✗'}</span>;
+
+    case 'MULTI_SELECT':
+      return <span>{Array.isArray(value) ? value.join(', ') : String(value)}</span>;
+
+    case 'IMAGE': {
+      const url = typeof value === 'string' ? value : Array.isArray(value) ? value[0] : '';
+      if (!url) return <span className="text-muted-foreground">—</span>;
+      return (
+        <a href={url} target="_blank" rel="noopener noreferrer" className="inline-block">
+          <span className="relative inline-block h-12 w-12 overflow-hidden rounded border">
+            <Image src={url} alt={fallback} fill sizes="48px" className="object-cover" />
+          </span>
+        </a>
+      );
+    }
+
+    case 'GALLERY': {
+      const urls = Array.isArray(value) ? value : value ? [value] : [];
+      if (urls.length === 0) return <span className="text-muted-foreground">—</span>;
+      return (
+        <div className="flex flex-wrap gap-1.5">
+          {urls.map((url, i) => (
+            <a
+              key={`${url}-${i}`}
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block"
+            >
+              <span className="relative inline-block h-10 w-10 overflow-hidden rounded border">
+                <Image src={url} alt={fallback} fill sizes="40px" className="object-cover" />
+              </span>
+            </a>
+          ))}
+        </div>
+      );
+    }
+
+    case 'COLOR': {
+      const hex = typeof value === 'string' ? value : '';
+      return (
+        <span className="inline-flex items-center gap-1.5">
+          <span
+            className="inline-block h-4 w-4 rounded border"
+            style={{ backgroundColor: hex || 'transparent' }}
+          />
+          <span className="font-mono">{hex || '—'}</span>
+        </span>
+      );
+    }
+
+    case 'DATE': {
+      const s = typeof value === 'string' ? value : '';
+      if (!s) return <span>—</span>;
+      const d = new Date(s);
+      return <span>{isNaN(d.getTime()) ? s : d.toLocaleDateString()}</span>;
+    }
+
+    case 'DATETIME': {
+      const s = typeof value === 'string' ? value : '';
+      if (!s) return <span>—</span>;
+      const d = new Date(s);
+      return <span>{isNaN(d.getTime()) ? s : d.toLocaleString()}</span>;
+    }
+
+    case 'URL': {
+      const href = typeof value === 'string' ? value : '';
+      if (!href) return <span>—</span>;
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary break-all underline"
+        >
+          {href}
+        </a>
+      );
+    }
+
+    default:
+      return <span>{Array.isArray(value) ? value.join(', ') : String(value ?? '')}</span>;
+  }
+}