Files
pieced-portal/src/components/ui/logo.tsx
admin ca1a014c01
All checks were successful
Build and Push / build (push) Successful in 1m43s
feat(admin): add search, sorting and pagination to admin tables
2026-05-30 12:24:30 +02:00

84 lines
2.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* PieCed honeycomb mark.
*
* Six flat-top hexagons: H1/H4 solid, H2/H3 outline, H5/H6 partial.
* All strokes/fills use `currentColor` so the mark inherits its colour
* from the surrounding text colour (e.g. `text-accent`) and adapts to
* hover/theme without editing the SVG. Original brand emerald is
* #10B981, which the accent token matches.
*
* viewBox is portrait (70×106); size it by height and let width follow
* (`h-7 w-auto`).
*/
export function Logo({
className,
title = "PieCed IT",
}: {
className?: string;
title?: string;
}) {
return (
<svg
viewBox="0 0 70 106"
className={className}
role="img"
aria-label={title}
fill="none"
>
<title>{title}</title>
{/* H1 — solid, top-left */}
<polygon
points="38.5,22.69 31.5,10.566 17.5,10.566 10.5,22.69 17.5,34.814 31.5,34.814"
fill="currentColor"
stroke="currentColor"
strokeWidth="1.6"
strokeLinejoin="round"
/>
{/* H2 — outline, upper-right */}
<polygon
points="59.5,34.814 52.5,22.69 38.5,22.69 31.5,34.814 38.5,46.938 52.5,46.938"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinejoin="round"
strokeLinecap="round"
/>
{/* H3 — outline, mid-left */}
<polygon
points="38.5,46.938 31.5,34.814 17.5,34.814 10.5,46.938 17.5,59.062 31.5,59.062"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinejoin="round"
strokeLinecap="round"
/>
{/* H4 — solid, mid-right */}
<polygon
points="59.5,59.062 52.5,46.938 38.5,46.938 31.5,59.062 38.5,71.186 52.5,71.186"
fill="currentColor"
stroke="currentColor"
strokeWidth="1.6"
strokeLinejoin="round"
/>
{/* H5 — partial, lower-left */}
<polyline
points="31.5,83.31 38.5,71.186 31.5,59.062 17.5,59.062 10.5,71.186"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinejoin="round"
strokeLinecap="round"
/>
{/* H6 — partial, lower-right */}
<polyline
points="59.5,83.31 52.5,71.186 38.5,71.186 31.5,83.31 38.5,95.434"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinejoin="round"
strokeLinecap="round"
/>
</svg>
);
}