127 lines
4.3 KiB
TypeScript
127 lines
4.3 KiB
TypeScript
import { cn } from "~/lib/utils";
|
|
import { getDisplayFlagConfig } from "~/lib/avatar-data";
|
|
import type { FlagConfig } from "~/lib/flag-types";
|
|
|
|
interface FlagSvgProps {
|
|
config: FlagConfig;
|
|
size?: number;
|
|
className?: string;
|
|
title?: string;
|
|
}
|
|
|
|
function colorAt(colors: string[], index: number): string {
|
|
return colors[index % colors.length] ?? "#adf661";
|
|
}
|
|
|
|
export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
|
|
const safeConfig = getDisplayFlagConfig(`${config.pattern}:${config.colors.join("-")}`, config);
|
|
const colors = safeConfig.colors;
|
|
const c0 = colorAt(colors, 0);
|
|
const c1 = colorAt(colors, 1);
|
|
const c2 = colorAt(colors, 2);
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
width={size}
|
|
height={size}
|
|
role="img"
|
|
aria-label={title}
|
|
className={cn("block shrink-0 overflow-hidden", className)}
|
|
>
|
|
{title ? <title>{title}</title> : null}
|
|
{safeConfig.pattern === "triband-h" && (
|
|
<>
|
|
<rect width="100" height="34" fill={c0} />
|
|
<rect y="33" width="100" height="34" fill={c1} />
|
|
<rect y="66" width="100" height="34" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "triband-v" && (
|
|
<>
|
|
<rect width="34" height="100" fill={c0} />
|
|
<rect x="33" width="34" height="100" fill={c1} />
|
|
<rect x="66" width="34" height="100" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "diagonal" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<polygon points="0,0 100,0 0,100" fill={c1} />
|
|
<polygon points="100,100 100,28 28,100" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "nordic-cross" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<rect x="30" width="18" height="100" fill={c1} />
|
|
<rect y="40" width="100" height="18" fill={c1} />
|
|
<rect x="36" width="6" height="100" fill={c2} />
|
|
<rect y="46" width="100" height="6" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "cross" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<rect x="40" width="20" height="100" fill={c1} />
|
|
<rect y="40" width="100" height="20" fill={c1} />
|
|
<rect x="46" width="8" height="100" fill={c2} />
|
|
<rect y="46" width="100" height="8" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "canton" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<rect width="50" height="50" fill={c1} />
|
|
<rect x="12" y="12" width="26" height="26" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "triangle" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<polygon points="0,0 64,50 0,100" fill={c1} />
|
|
<polygon points="0,22 36,50 0,78" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "chevron" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<polygon points="0,0 56,50 0,100 28,100 84,50 28,0" fill={c1} />
|
|
<polygon points="0,22 32,50 0,78 0,62 14,50 0,38" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "quartered" && (
|
|
<>
|
|
<rect width="50" height="50" fill={c0} />
|
|
<rect x="50" width="50" height="50" fill={c1} />
|
|
<rect y="50" width="50" height="50" fill={c1} />
|
|
<rect x="50" y="50" width="50" height="50" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "bordered" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<rect x="12" y="12" width="76" height="76" fill={c1} />
|
|
<rect x="24" y="24" width="52" height="52" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "circle" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<circle cx="50" cy="50" r="30" fill={c1} />
|
|
<circle cx="50" cy="50" r="15" fill={c2} />
|
|
</>
|
|
)}
|
|
{safeConfig.pattern === "star" && (
|
|
<>
|
|
<rect width="100" height="100" fill={c0} />
|
|
<polygon
|
|
points="50,14 60,39 87,39 65,56 73,84 50,67 27,84 35,56 13,39 40,39"
|
|
fill={c1}
|
|
/>
|
|
<circle cx="50" cy="50" r="10" fill={c2} />
|
|
</>
|
|
)}
|
|
</svg>
|
|
);
|
|
}
|