1import type { DuoPose } from "@t3tools/client-runtime/device/duo-control";
2import { cn } from "~/lib/utils";
3
4const stancePaths = {
5 laptop:
6 "M2.7351 12.9857 L15.8128 11.4159 L14.4114 3.3787 C14.1943 2.134 13.1275 1.2319 12.0283 1.3639 L2.9308 2.4559 C1.8317 2.5879 1.1167 3.7038 1.3337 4.9485 L2.7351 12.9857 Z M2.7351 12.9857 L15.8128 11.4159 L19.9103 12.8914 C20.5449 13.1199 20.1683 13.4121 19.0692 13.5441 L9.9717 14.6361 C8.8725 14.7681 7.4672 14.6898 6.8326 14.4612 L2.7351 12.9857 Z",
7 tent: "M3.2522 2.7267 L18.7478 1.4816 L16.696 9.7017 C16.3782 10.9748 15.0649 12.0915 13.7626 12.1962 L2.983 13.0623 C1.6807 13.167 0.8826 12.2199 1.2004 10.9468 L3.2522 2.7267 Z M3.2522 2.7267 L18.7478 1.4816 L20.7996 10.6909 C21.1174 12.1172 20.3193 13.3581 19.017 13.4628 L8.2374 14.3289 C6.9351 14.4336 5.6218 13.3623 5.304 11.936 L3.2522 2.7267 Z",
8} as const;
9
10export function DeviceDuoGlyph({ pose, rotated = false }: { pose: DuoPose; rotated?: boolean }) {
11 const stance = pose === "laptop" || pose === "tent";
12 return (
13 <svg
14 viewBox={stance ? "0 0 22 16" : "0 0 24 24"}
15 fill="none"
16 stroke="currentColor"
17 strokeWidth={stance ? 1.25 : 1.35}
18 strokeLinecap="round"
19 strokeLinejoin="round"
20 className={cn("size-7 shrink-0", rotated && "rotate-90")}
21 aria-hidden
22 >
23 {stance ? <path d={stancePaths[pose]} /> : null}
24 {pose === "closed" ? (
25 <>
26 <rect x="5.8" y="3" width="12.4" height="18" rx="2.2" />
27 <circle cx="15.4" cy="5.7" r=".6" fill="currentColor" stroke="none" />
28 <path d="M10.6 18.2h2.8" />
29 </>
30 ) : null}
31 {pose === "book" ? (
32 <path d="M4.6 18.1V5.9Q4.6 4.9 5.9 4.9L12 7.5L18.1 4.9Q19.4 4.9 19.4 5.9V18.1Q19.4 19.1 18.1 19.1L12 16.5L5.9 19.1Q4.6 19.1 4.6 18.1Z" />
33 ) : null}
34 {pose === "open" ? (
35 <>
36 <rect x="2.5" y="5" width="19" height="14" rx="2.4" />
37 <path d="M10.5 16.3h3" />
38 </>
39 ) : null}
40 </svg>
41 );
42}