feat(design): designauswahl mit klemmbaustein-look als standard

Sechs Designs (Klemmbaustein, Warm, Nachtblau, Bonbon, Bauklotz, Schlicht) als Tokens je data-design, gewaehlt unter Konto und pro Geraet im Cookie gespeichert. Dazu Noppen, Steinkontur, Platzhalter fuer Sets ohne Bild, neues Logo, lokal gebuendelte Schriften und eine Startseite mit Steinreihe und naechstem Termin. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-25 15:01:33 +01:00
parent e9093d0fad
commit 1b825b44c4
26 changed files with 1343 additions and 259 deletions
@@ -0,0 +1,66 @@
+import { cn } from 'cn';
+import { toneIndex } from '@/lib/design';
+
+const TONE_CLASSES: Record<number, string> = {
+  1: 'bg-tone-1',
+  2: 'bg-tone-2',
+  3: 'bg-tone-3',
+  4: 'bg-tone-4',
+  5: 'bg-tone-5',
+};
+
+/**
+ * Stand-in for a set without an image: the manufacturer's tone, a drawn
+ * brick and the set number. Reads as intended rather than as "image broken".
+ */
+export function SetPlaceholder({
+  setNumber,
+  manufacturerName,
+  size = 'md',
+  className,
+}: {
+  setNumber: string;
+  manufacturerName: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}) {
+  const tone = TONE_CLASSES[toneIndex(manufacturerName)];
+
+  return (
+    <div
+      className={cn(
+        'relative flex size-full items-end overflow-hidden text-tone-ink',
+        size === 'sm' ? 'p-1.5' : 'p-3',
+        tone,
+        className,
+      )}
+    >
+      {size !== 'sm' ? (
+        <svg
+          viewBox="0 0 70 44"
+          aria-hidden
+          className={cn(
+            'absolute opacity-40',
+            size === 'lg' ? 'top-[18%] right-[12%] w-2/5' : 'top-3 right-3 w-1/3',
+          )}
+        >
+          <g fill="none" stroke="currentColor" strokeWidth="2.5">
+            <rect x="12" y="2" width="16" height="10" rx="3" />
+            <rect x="42" y="2" width="16" height="10" rx="3" />
+            <rect x="2" y="10" width="66" height="32" rx="7" />
+          </g>
+        </svg>
+      ) : null}
+      <span
+        className={cn(
+          'relative leading-none font-bold tracking-tight [font-family:var(--font-display)] tabular-nums',
+          size === 'sm' && 'text-xs',
+          size === 'md' && (setNumber.length > 6 ? 'text-lg' : 'text-2xl'),
+          size === 'lg' && 'text-5xl',
+        )}
+      >
+        {setNumber}
+      </span>
+    </div>
+  );
+}