Open History to see the last commit
1import { cn } from "../../lib/utils";
2import type { ThemeCardPreviewColors } from "./ThemePreviewCircles";
3
4function ThemeWireframePane({
5 colors,
6 clip,
7}: {
8 colors: ThemeCardPreviewColors;
9 clip?: "left" | "right" | undefined;
10}) {
11 const line = "rgb(127 127 127 / 0.25)";
12 return (
13 <span
14 className="absolute inset-0"
15 style={
16 clip === undefined
17 ? undefined
18 : {
19 clipPath:
20 clip === "left"
21 ? "polygon(0 0, calc(50% - 1px) 0, calc(50% - 1px) 100%, 0 100%)"
22 : "polygon(calc(50% + 1px) 0, 100% 0, 100% 100%, calc(50% + 1px) 100%)",
23 }
24 }
25 >
26 <span className="absolute inset-0" style={{ backgroundColor: colors.canvas }} />
27 <span
28 className="absolute inset-y-0 left-0 w-[22%]"
29 style={{ backgroundColor: colors.sidebar, boxShadow: `inset -1px 0 0 ${line}` }}
30 />
31
32 <span
33 className="absolute left-[3%] top-[8%] h-[8%] w-[16%] rounded-md"
34 style={{ backgroundColor: colors.surface, boxShadow: `inset 0 0 0 1px ${line}` }}
35 />
36 <span
37 className="absolute left-[3%] top-[22%] h-[7%] w-[16%] rounded-md"
38 style={{ backgroundColor: colors.accentSurface }}
39 />
40 <span
41 className="absolute left-[3%] top-[32%] h-[7%] w-[16%] rounded-md"
42 style={{ backgroundColor: colors.messageSurface, opacity: 0.7 }}
43 />
44 <span
45 className="absolute left-[3%] top-[42%] h-[7%] w-[16%] rounded-md"
46 style={{ backgroundColor: colors.messageSurface, opacity: 0.5 }}
47 />
48
49 <span
50 className="absolute right-[28%] top-[11%] h-[9%] w-[24%] rounded-lg"
51 style={{ backgroundColor: colors.messageSurface }}
52 />
53 <span
54 className="absolute left-[27%] top-[28%] h-[5%] w-[34%] rounded-sm"
55 style={{ backgroundColor: line }}
56 />
57 <span
58 className="absolute left-[27%] top-[38%] h-[5%] w-[26%] rounded-sm"
59 style={{ backgroundColor: line }}
60 />
61
62 <span
63 className="absolute bottom-[8%] left-[26%] right-[6%] flex h-[15%] items-center justify-between rounded-md px-1"
64 style={{
65 backgroundColor: colors.surface,
66 boxShadow: `inset 0 0 0 1px ${line}`,
67 }}
68 >
69 <span
70 className="block h-[26%] w-[34%] rounded-full"
71 style={{ backgroundColor: line, opacity: 0.7 }}
72 />
73 <span
74 className="block aspect-square h-[58%] rounded-full"
75 style={{ backgroundColor: colors.messageAction }}
76 />
77 </span>
78
79 <span
80 className="absolute right-[5%] top-[8%] h-[46%] w-[20%] rounded-lg"
81 style={{
82 backgroundColor: colors.surface,
83 boxShadow: `inset 0 0 0 1px ${line}, 0 2px 5px rgb(0 0 0 / 0.14)`,
84 }}
85 >
86 {[0, 1, 2].map((row) => (
87 <span
88 className="absolute left-[11%] right-[11%] flex items-center gap-1"
89 key={row}
90 style={{ top: `${10 + row * 30}%`, height: "20%" }}
91 >
92 <span
93 className="block aspect-square h-[26%] rounded-full"
94 style={{
95 backgroundColor:
96 row === 0 ? "#34d399" : row === 1 ? colors.messageAction : "#fbbf24",
97 opacity: 0.55,
98 }}
99 />
100 <span className="block h-[30%] w-[52%] rounded-sm" style={{ backgroundColor: line }} />
101 </span>
102 ))}
103 </span>
104 </span>
105 );
106}
107
108export function ThemeWireframe({
109 className,
110 panes,
111}: {
112 className?: string;
113 panes: ReadonlyArray<{ colors: ThemeCardPreviewColors; clip?: "left" | "right" }>;
114}) {
115 return (
116 <span
117 aria-hidden
118 className={cn(
119 "relative block w-full overflow-hidden rounded-lg border border-border/60",
120 className,
121 )}
122 >
123 {panes.map((pane) => (
124 <ThemeWireframePane clip={pane.clip} colors={pane.colors} key={pane.clip ?? "pane"} />
125 ))}
126 </span>
127 );
128}