Nick SzaunigandClaude Opus 5.5
7c305a3fce
Fehlt ein Foto, zeigte die Seite einen Farbverlauf mit Diagonallinien - ein generisches Muster, das auf Produkt- und Inhaltskacheln wie unfertige Vorlage wirkte. Jetzt: ruhige Markenflaeche mit leisem Wabenraster, das gezeichnete Waben-Zeichen und darunter der Name in gesperrten Serif-Versalien, wie auf dem Etikett. In kleinen Groessen (Warenkorb, Galerie-Vorschau) bleibt per Container Query nur das Zeichen. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { HoneycombPattern } from "@/components/honeycomb";
|
|
import { Logomark } from "@/components/logomark";
|
|
|
|
const SURFACES = {
|
|
forest: "bg-forest text-cream",
|
|
cream: "bg-cream text-forest",
|
|
honey: "bg-honey-pale/60 text-forest",
|
|
} as const;
|
|
|
|
/**
|
|
* Platzhalter, solange fuer ein Produkt oder einen Abschnitt kein Foto
|
|
* gepflegt ist. Gestaltet wie das Glas-Etikett: ruhige Flaeche, das
|
|
* gezeichnete Waben-Zeichen und darunter der Name in gesperrten
|
|
* Serif-Versalien — statt eines generischen Farbverlaufs mit Linientextur.
|
|
*
|
|
* In kleinen Groessen (Warenkorb, Galerie-Vorschau) bleibt nur das Zeichen;
|
|
* der Name erscheint erst ab 9rem Breite (Container Query).
|
|
*/
|
|
export function PlaceholderImage({
|
|
className = "",
|
|
tone = "forest",
|
|
label,
|
|
}: {
|
|
className?: string;
|
|
tone?: keyof typeof SURFACES;
|
|
label?: string;
|
|
}) {
|
|
return (
|
|
<div className={`@container relative overflow-hidden ${SURFACES[tone]} ${className}`}>
|
|
<HoneycombPattern className="opacity-[0.07]" size={20} fade="radial" />
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center gap-4 p-4 text-center">
|
|
<Logomark
|
|
className="aspect-square h-auto w-[26%] max-w-20 opacity-70"
|
|
variant={tone === "forest" ? "inverted" : "default"}
|
|
/>
|
|
{label ? (
|
|
<span className="hidden max-w-[80%] font-serif text-base uppercase leading-snug tracking-[0.2em] opacity-60 @min-[9rem]:line-clamp-2">
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|