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.
38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
/**
|
|
* Wabenhain-Wortzeichen: Hexagon-Rahmen mit drei stilisierten Tannen,
|
|
* nachempfunden dem gedruckten Glas-Etikett. "default" fuer helle
|
|
* Hintergrunde (Honiggold-Hexagon, dunkle Tannen), "inverted" fuer dunkle
|
|
* Hintergruende wie Footer/Mobile-Menue (Creme-Hexagon und -Tannen).
|
|
*/
|
|
export function Logomark({
|
|
className = "h-8 w-8",
|
|
variant = "default",
|
|
}: {
|
|
className?: string;
|
|
variant?: "default" | "inverted";
|
|
}) {
|
|
const hexColor = variant === "inverted" ? "#F4EFE5" : "#B88A44";
|
|
const treeColor = variant === "inverted" ? "#F4EFE5" : "#24352B";
|
|
|
|
return (
|
|
<svg viewBox="0 0 100 100" className={className} fill="none" aria-hidden="true">
|
|
<polygon
|
|
points="50,5 88.97,27.5 88.97,72.5 50,95 11.03,72.5 11.03,27.5"
|
|
stroke={hexColor}
|
|
strokeWidth="2.5"
|
|
/>
|
|
{[
|
|
{ x: 20, y: 45, scale: 0.7 },
|
|
{ x: 38, y: 32, scale: 0.95 },
|
|
{ x: 56, y: 45, scale: 0.7 },
|
|
].map((tree) => (
|
|
<g key={tree.x} transform={`translate(${tree.x} ${tree.y}) scale(${tree.scale})`}>
|
|
<polygon points="10,2 5,13 15,13" stroke={treeColor} strokeWidth="1.4" strokeLinejoin="round" />
|
|
<polygon points="10,10 2,22 18,22" stroke={treeColor} strokeWidth="1.4" strokeLinejoin="round" />
|
|
<rect x="8" y="22" width="4" height="4" stroke={treeColor} strokeWidth="1.4" />
|
|
</g>
|
|
))}
|
|
</svg>
|
|
);
|
|
}
|