_❯3D Server Rack

1import { useState } from "react";
2import { ServerUnitRack } from "@/components/misc/server-unit/server-unit.component";
3import { LabsDemoLayout } from "../../components/labs-experiment-frame/labs-experiment-frame.component";
4import {
5  ButtonGroupControl,
6  ControlGroup,
7  ControlPanel,
8  ResetButton,
9  SliderControl,
10} from "../../components/labs-control/labs-control.component";
11import * as styles from "./server-unit-3d.demo.css";
12
13type ServerUnitSize = "xs" | "sm" | "md" | "lg";
14
15const SIZE_OPTIONS: readonly ServerUnitSize[] = ["xs", "sm", "md", "lg"];
16const DEFAULT_ROTATE = { x: 4, y: -24, z: 0 };
17
18export function ServerUnit3dDemo() {
19  const [rotate, setRotate] = useState(DEFAULT_ROTATE);
20  const [scale, setScale] = useState(1);
21  const [seed, setSeed] = useState(42);
22  const [size, setSize] = useState<ServerUnitSize>("md");
23
24  const reset = () => {
25    setRotate(DEFAULT_ROTATE);
26    setScale(1);
27    setSeed(42);
28    setSize("md");
29  };
30
31  return (
32    <LabsDemoLayout
33      stage={
34        <div className={styles.stageInner} style={{ transform: `scale(${scale})` }}>
35          <div
36            className={styles.wrapper3d}
37            style={{
38              transform: `rotateX(${rotate.x}deg) rotateY(${rotate.y}deg) rotateZ(${rotate.z}deg)`,
39            }}
40          >
41            <ServerUnitRack seed={seed} size={size} />
42          </div>
43        </div>
44      }
45      controls={
46        <ControlPanel>
47          <ControlGroup title="Size">
48            <ButtonGroupControl
49              options={SIZE_OPTIONS}
50              value={size}
51              onChange={setSize}
52              formatOption={(option) => option.toUpperCase()}
53            />
54          </ControlGroup>
55
56          <ControlGroup title="Rotation">
57            <SliderControl
58              label="X"
59              value={rotate.x}
60              min={-180}
61              max={180}
62              onChange={(value) => setRotate((prev) => ({ ...prev, x: value }))}
63              format={(value) => `${value}°`}
64            />
65            <SliderControl
66              label="Y"
67              value={rotate.y}
68              min={-180}
69              max={180}
70              onChange={(value) => setRotate((prev) => ({ ...prev, y: value }))}
71              format={(value) => `${value}°`}
72            />
73            <SliderControl
74              label="Z"
75              value={rotate.z}
76              min={-180}
77              max={180}
78              onChange={(value) => setRotate((prev) => ({ ...prev, z: value }))}
79              format={(value) => `${value}°`}
80            />
81          </ControlGroup>
82
83          <ControlGroup title="Scale">
84            <SliderControl
85              label="Zoom"
86              value={scale}
87              min={0.1}
88              max={3}
89              step={0.1}
90              onChange={setScale}
91              format={(value) => `${value.toFixed(2)}x`}
92            />
93          </ControlGroup>
94
95          <ControlGroup title="LEDs">
96            <SliderControl
97              label="Seed"
98              value={seed}
99              min={0}
100              max={100}
101              onChange={setSeed}
102              format={(value) => `#${value}`}
103            />
104          </ControlGroup>
105
106          <ResetButton onReset={reset} />
107        </ControlPanel>
108      }
109    />
110  );
111}