unknownandClaude Opus 5.5
1b825b44c4
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>
67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
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>
|
|
);
|
|
}
|