Skip to content

Commit 5eb7c77

Browse files
hasparushasparus
committed
WIP
1 parent 3be9a8a commit 5eb7c77

File tree

3 files changed

+200
-0
lines changed

3 files changed

+200
-0
lines changed

‎src/app/conf/_design-system/pixelarticons/modem.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/index-page/data-colocation/component-tree.tsx

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import ModemIcon from "@/app/conf/_design-system/pixelarticons/modem.svg?svgr"
2+
import clsx from "clsx"
3+
4+
const INNER_BOX_SIZE = 16
5+
const GAP_X = 32
6+
7+
interface ComponentTreeProps extends React.HTMLAttributes<HTMLDivElement> {
8+
names: [string, string, string, string]
9+
}
10+
11+
export function ComponentTree({
12+
names,
13+
className,
14+
...rest
15+
}: ComponentTreeProps) {
16+
return (
17+
<div className={clsx("mx-auto flex gap-x-20", className)} {...rest}>
18+
<div className="flex flex-col">
19+
<div className="flex h-12 items-center">
20+
<ComponentLabel bgColor="bg-neu-0" borderColor="border-neu-300">
21+
{names[0]}
22+
</ComponentLabel>
23+
</div>
24+
25+
<div className="h-4" />
26+
27+
<div className="flex h-12 items-center">
28+
<ComponentLabel bgColor="bg-neu-400" borderColor="border-neu-600">
29+
{names[1]}
30+
</ComponentLabel>
31+
</div>
32+
33+
<div className="h-4" />
34+
35+
<div className="flex h-12 items-center">
36+
<ComponentLabel
37+
bgColor="bg-sec-lighter"
38+
borderColor="border-sec-base"
39+
>
40+
{names[2]}
41+
</ComponentLabel>
42+
</div>
43+
44+
<div className="h-4" />
45+
46+
<div className="flex h-12 items-center">
47+
<ComponentLabel
48+
bgColor="bg-pri-lighter/40"
49+
borderColor="border-pri-base"
50+
>
51+
{names[3]}
52+
</ComponentLabel>
53+
</div>
54+
</div>
55+
56+
<div className="flex flex-col items-center">
57+
<div className="flex size-12 items-center justify-center bg-neu-100">
58+
<ModemIcon className="size-8 text-neu-600" />
59+
</div>
60+
61+
<div className="h-4 w-px bg-neu-300" />
62+
63+
<NestedBox
64+
bgColor="bg-neu-600"
65+
middleColor="bg-sec-base"
66+
innerColor="bg-pri-base"
67+
/>
68+
69+
<Fork
70+
className="text-neu-300"
71+
style={{
72+
width: `calc(100% - ${GAP_X + INNER_BOX_SIZE * 5.75}px)`,
73+
}}
74+
/>
75+
76+
<div className="flex" style={{ gap: GAP_X }}>
77+
<div className="flex flex-col items-center">
78+
<NestedBox
79+
bgColor="bg-neu-100"
80+
middleColor="bg-sec-base"
81+
innerColor="bg-pri-base"
82+
/>
83+
<Fork className="text-neu-300" />
84+
<div className="flex" style={{ gap: GAP_X }}>
85+
<LeafBox />
86+
<LeafBox />
87+
</div>
88+
</div>
89+
<div className="flex flex-col items-center">
90+
<NestedBox
91+
bgColor="bg-neu-100"
92+
middleColor="bg-sec-base"
93+
innerColor="bg-pri-base"
94+
/>
95+
<Fork className="text-neu-300" />
96+
<div className="flex" style={{ gap: GAP_X }}>
97+
<LeafBox />
98+
<LeafBox />
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
)
105+
}
106+
107+
interface NestedBoxProps {
108+
bgColor: string
109+
middleColor?: string
110+
innerColor: string
111+
}
112+
113+
function NestedBox({ bgColor, middleColor, innerColor }: NestedBoxProps) {
114+
const padding = INNER_BOX_SIZE / 2
115+
116+
return (
117+
<div className={bgColor} style={{ padding }}>
118+
<div className={middleColor || bgColor} style={{ padding }}>
119+
<div className={innerColor} style={{ padding }} />
120+
</div>
121+
</div>
122+
)
123+
}
124+
125+
interface ComponentLabelProps {
126+
children: React.ReactNode
127+
bgColor: string
128+
borderColor: string
129+
}
130+
131+
function ComponentLabel({
132+
children,
133+
bgColor,
134+
borderColor,
135+
}: ComponentLabelProps) {
136+
return (
137+
<div
138+
className={`rounded border ${borderColor} ${bgColor} px-1 py-0.5 font-mono text-[10px] text-neu-800`}
139+
>
140+
{children}
141+
</div>
142+
)
143+
}
144+
145+
function LeafBox() {
146+
return <NestedBox bgColor="bg-neu-100" innerColor="bg-pri-base" />
147+
}
148+
149+
function Fork(props: React.SVGProps<SVGSVGElement>) {
150+
return (
151+
<svg
152+
width="81"
153+
height="16"
154+
viewBox="0 0 81 16"
155+
stroke="currentColor"
156+
fill="none"
157+
preserveAspectRatio="none"
158+
{...props}
159+
>
160+
<path d="M40.5 8V0M1 16V8m79 8V8" vectorEffect="non-scaling-stroke" />
161+
<path
162+
d="m1 8 79-.00001"
163+
stroke-linecap="square"
164+
vectorEffect="non-scaling-stroke"
165+
/>
166+
</svg>
167+
)
168+
}

‎src/components/index-page/data-colocation/index.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { SectionLabel } from "@/app/conf/_design-system/section-label"
2+
import { ComponentTree } from "./component-tree"
3+
4+
export function DataColocation() {
5+
return (
6+
<section className="gql-container gql-section flex flex-wrap xl:p-24">
7+
<div>
8+
<header>
9+
<SectionLabel>Data Colocation</SectionLabel>
10+
<h2 className="typography-h2 mt-6">Data Colocation</h2>
11+
<p className="typography-body-md mt-6">
12+
GraphQL fragments let you reuse common field selections across
13+
queries, making your code more maintainable and consistent.
14+
</p>
15+
</header>
16+
<ComponentTree
17+
className="mt-6 lg:mt-12 xl:mt-16"
18+
names={[
19+
"Server",
20+
"<FriendList>",
21+
"<FriendListItem>",
22+
"<FriendInfo/>",
23+
]}
24+
/>
25+
</div>
26+
</section>
27+
)
28+
}

0 commit comments

Comments
 (0)