Nick Szaunig
c7927f2883
Vollstaendige Next.js/Prisma-E-Commerce-Anwendung fuer eine Imkerei: Shop, Warenkorb, Stripe-Checkout, Kundenkonto mit 2FA, Admin-Bereich (Produkte, Ernten, Chargen, Bestellungen, Gutscheine, admin-editierbare Website-Inhalte), i18n (DE/EN), Rate-Limiting/CSP/Audit-Log-Haertung, PostgreSQL- und MySQL-Unterstuetzung ueber austauschbare Prisma- Treiber-Adapter, Unit-/Komponenten-/E2E-Tests.
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
/**
|
|
* Abstrakter, hochwertiger Bild-Platzhalter (Farbverlauf + feine Linientextur)
|
|
* fuer Bereiche, in denen echte Produkt-/Naturfotografie noch fehlt. Bewusst
|
|
* ohne Comic-Motive oder Wabenmuster-Kitsch, passend zur Markenpalette.
|
|
*/
|
|
export function PlaceholderImage({
|
|
className = "",
|
|
tone = "forest",
|
|
label,
|
|
}: {
|
|
className?: string;
|
|
tone?: "forest" | "cream" | "honey";
|
|
label?: string;
|
|
}) {
|
|
const gradients: Record<string, string> = {
|
|
forest: "from-[#1a271f] via-[#24352b] to-[#3a4d3f]",
|
|
cream: "from-[#efe8d8] via-[#f4efe5] to-[#e2d9c4]",
|
|
honey: "from-[#8a6832] via-[#b88a44] to-[#c9a468]",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`relative overflow-hidden bg-gradient-to-br ${gradients[tone]} ${className}`}
|
|
>
|
|
<svg
|
|
className="absolute inset-0 w-full h-full opacity-[0.15]"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
<pattern id="lines" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<path d="M0 40L40 0" stroke="currentColor" strokeWidth="0.5" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#lines)" />
|
|
</svg>
|
|
{label ? (
|
|
<span
|
|
className={`absolute bottom-4 left-4 right-4 truncate text-[11px] tracking-wide-caps ${
|
|
tone === "cream" ? "text-forest/50" : "text-cream/50"
|
|
}`}
|
|
>
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|