Hero Device Assemble

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9const MockUI = ({ accentColor }: { accentColor: string }) => (
10  <div
11    style={{
12      background: "#0b0b0f",
13      color: "white",
14      display: "flex",
15      flexDirection: "column",
16      fontFamily: FONT_FAMILY,
17      inset: 0,
18      overflow: "hidden",
19      position: "absolute",
20    }}
21  >
22    {/* Title bar */}
23    <div
24      style={{
25        alignItems: "center",
26        background: "#111118",
27        borderBottom: "1px solid rgba(255,255,255,0.06)",
28        display: "flex",
29        gap: 8,
30        height: "10%",
31        padding: "0 16px",
32      }}
33    >
34      <div
35        style={{
36          background: "rgba(255,255,255,0.18)",
37          borderRadius: "50%",
38          height: 10,
39          width: 10,
40        }}
41      />
42      <div
43        style={{
44          background: "rgba(255,255,255,0.18)",
45          borderRadius: "50%",
46          height: 10,
47          width: 10,
48        }}
49      />
50      <div
51        style={{
52          background: "rgba(255,255,255,0.18)",
53          borderRadius: "50%",
54          height: 10,
55          width: 10,
56        }}
57      />
58    </div>
59    <div style={{ display: "flex", flex: 1 }}>
60      {/* Sidebar */}
61      <div
62        style={{
63          background: "#0e0e14",
64          borderRight: "1px solid rgba(255,255,255,0.05)",
65          display: "flex",
66          flexDirection: "column",
67          gap: 10,
68          padding: 16,
69          width: "22%",
70        }}
71      >
72        <div
73          style={{
74            background: accentColor,
75            borderRadius: 4,
76            height: 12,
77            opacity: 0.85,
78            width: "70%",
79          }}
80        />
81        <div
82          style={{
83            background: "rgba(255,255,255,0.1)",
84            borderRadius: 4,
85            height: 10,
86            width: "85%",
87          }}
88        />
89        <div
90          style={{
91            background: "rgba(255,255,255,0.08)",
92            borderRadius: 4,
93            height: 10,
94            width: "60%",
95          }}
96        />
97        <div
98          style={{
99            background: "rgba(255,255,255,0.08)",
100            borderRadius: 4,
101            height: 10,
102            width: "75%",
103          }}
104        />
105      </div>
106      {/* Content */}
107      <div
108        style={{
109          display: "flex",
110          flex: 1,
111// … truncated