1import type { ProjectIconColor } from "@t3tools/contracts";
2import { projectIconColorClassName } from "../projectIconColors";
3import { cn } from "~/lib/utils";
4
5const monogramSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
6
7export function ProjectMonogram({
8 text,
9 color,
10 className,
11}: {
12 readonly text: string;
13 readonly color: ProjectIconColor;
14 readonly className?: string | undefined;
15}) {
16 // Wrap the tile to avoid menu/button SVG margin trimming.
17 return (
18 <span
19 aria-hidden="true"
20 className={cn("inline-flex size-4 shrink-0 items-center justify-center", className)}
21 >
22 <svg
23 viewBox="0 0 16 16"
24 className={cn(
25 "size-full overflow-hidden rounded-[25%] font-mono select-none",
26 projectIconColorClassName(color),
27 )}
28 style={{
29 backgroundColor: "color-mix(in srgb, currentColor 14%, transparent)",
30 }}
31 >
32 <text
33 x="8"
34 y="10.8"
35 textAnchor="middle"
36 fill="currentColor"
37 className="font-mono"
38 fontSize="8.25"
39 fontWeight="700"
40 textLength={Array.from(monogramSegmenter.segment(text)).length === 1 ? 6 : 12}
41 lengthAdjust="spacingAndGlyphs"
42 textRendering="geometricPrecision"
43 >
44 {text}
45 </text>
46 </svg>
47 </span>
48 );
49}