1import type { DuoPose } from "@t3tools/client-runtime/device/duo-control";
2import { cn } from "~/lib/utils";
3
4// Fold outlines follow Simulator's Duo toolbar; the rounded stance contours are
5// ported from SimulatorFoldingPoseGlyph's SwiftUI paths.
6const stancePaths = {
7 laptop:
8 "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",
9 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",
10} as const;
11
12/**
13 * Fold glyphs draw the physical device held as a vertical phone: it opens like a book into a
14 * landscape tablet. `rotated` turns the whole device a quarter clockwise for a horizontal phone,
15 * camera and home indicator included, as Simulator does.
16 */
17export function DeviceDuoGlyph({ pose, rotated = false }: { pose: DuoPose; rotated?: boolean }) {
18 const stance = pose === "laptop" || pose === "tent";
19 return (
20 <svg
21 viewBox={stance ? "0 0 22 16" : "0 0 24 24"}
22 fill="none"
23 stroke="currentColor"
24 strokeWidth={stance ? 1.25 : 1.35}
25 strokeLinecap="round"
26 strokeLinejoin="round"
27 className={cn("size-7 shrink-0", rotated && "rotate-90")}
28 aria-hidden
29 >
30 {stance ? <path d={stancePaths[pose]} /> : null}
31 {pose === "closed" ? (
32 <>
33 <rect x="5.8" y="3" width="12.4" height="18" rx="2.2" />
34 <circle cx="15.4" cy="5.7" r=".6" fill="currentColor" stroke="none" />
35 <path d="M10.6 18.2h2.8" />
36 </>
37 ) : null}
38 {pose === "book" ? (
39 <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" />
40 ) : null}
41 {pose === "open" ? (
42 <>
43 <rect x="2.5" y="5" width="19" height="14" rx="2.4" />
44 <path d="M10.5 16.3h3" />
45 </>
46 ) : null}
47 </svg>
48 );
49}