Skip to content

Commit abb1b30

Browse files
hasparushasparus
committed
wip
1 parent 39ddc6a commit abb1b30

File tree

1 file changed

+78
-163
lines changed
  • src/components/index-page/what-is-graphql

1 file changed

+78
-163
lines changed

‎src/components/index-page/what-is-graphql/wires.tsx

Lines changed: 78 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -52,42 +52,33 @@ function ClientEdges({
5252
)
5353
}
5454

55-
function ServerEdges() {
55+
function ServerEdges({ highlighted }: { highlighted?: number }) {
56+
const paths = [
57+
"M696 159.5H811.5V75H1176",
58+
"M696 175.5L833.5 175.5V112H1104.5",
59+
"M696 191.5H855.5V148.5H1176",
60+
"M696 206.5L876 206.5V184.5H1104",
61+
"M696 220.5H704.5H1176",
62+
"M696 234.5L876 234.5V256.5H1104",
63+
"M696 249.5H855.5V292.5H1176",
64+
"M696 265.5L833.5 265.5V329H1104",
65+
"M696 281.5H811.5V366H1176",
66+
] as const
67+
5668
return (
5769
<>
58-
<path
59-
d="M696 249.5H855.5V292.5H1176"
60-
stroke="url(#paint9_linear_671_9150)"
61-
/>
62-
<path d="M696 220.5H704.5H1176" stroke="url(#paint10_linear_671_9150)" />
63-
<path
64-
d="M696 281.5H811.5V366H1176"
65-
stroke="url(#paint11_linear_671_9150)"
66-
/>
67-
<path
68-
d="M696 265.5L833.5 265.5V329H1104"
69-
stroke="url(#paint12_linear_671_9150)"
70-
/>
71-
<path
72-
d="M696 234.5L876 234.5V256.5H1104"
73-
stroke="url(#paint13_linear_671_9150)"
74-
/>
75-
<path
76-
d="M696 191.5H855.5V148.5H1176"
77-
stroke="url(#paint14_linear_671_9150)"
78-
/>
79-
<path
80-
d="M696 159.5H811.5V75H1176"
81-
stroke="url(#paint15_linear_671_9150)"
82-
/>
83-
<path
84-
d="M696 175.5L833.5 175.5V112H1104.5"
85-
stroke="url(#paint16_linear_671_9150)"
86-
/>
87-
<path
88-
d="M696 206.5L876 206.5V184.5H1104"
89-
stroke="url(#paint17_linear_671_9150)"
90-
/>
70+
{paths.map((d, index) => (
71+
<path
72+
key={index}
73+
d={d}
74+
stroke={
75+
highlighted === index
76+
? `url(#paint_sr_dark_linear_671_9150)`
77+
: `url(#paint_sr_light_linear_671_9150)`
78+
}
79+
strokeWidth={highlighted === index ? "2" : "1"}
80+
/>
81+
))}
9182
</>
9283
)
9384
}
@@ -159,44 +150,44 @@ function ClientBoxes({ highlighted }: { highlighted?: number }) {
159150
)
160151
}
161152

162-
function ServerBoxes() {
153+
function ServerBoxes({ highlighted }: { highlighted?: number }) {
154+
/* eslint-disable react/jsx-key */
155+
const boxes = [
156+
["translate(1176, 48)", <LabirynthIcon />],
157+
["translate(1104, 84)", <ServerIcon />],
158+
["translate(1176, 120)", <ModemIcon />],
159+
["translate(1104, 156)", <CloudIcon />],
160+
["translate(1176, 192)", <ServerIcon />],
161+
["translate(1104, 228)", <LabirynthIcon />],
162+
["translate(1176, 264)", <ServerIcon />],
163+
["translate(1104, 300)", <ServerIcon />],
164+
["translate(1176, 336)", <CloudIcon />],
165+
] as const
166+
/* eslint-enable react/jsx-key */
167+
163168
return (
164169
<>
165-
<Box transform="translate(1176, 48)">
166-
<LabirynthIcon />
167-
</Box>
168-
169-
<Box transform="translate(1104, 84)">
170-
<ServerIcon />
171-
</Box>
172-
173-
<Box transform="translate(1176, 120)">
174-
<ModemIcon />
175-
</Box>
176-
177-
<Box transform="translate(1104, 156)">
178-
<CloudIcon />
179-
</Box>
180-
181-
<Box transform="translate(1176, 192)">
182-
<ServerIcon />
183-
</Box>
184-
185-
<Box transform="translate(1104, 228)">
186-
<LabirynthIcon />
187-
</Box>
188-
189-
<Box transform="translate(1176, 264)">
190-
<ServerIcon />
191-
</Box>
192-
193-
<Box transform="translate(1104, 300)">
194-
<ServerIcon />
195-
</Box>
196-
197-
<Box transform="translate(1176, 336)">
198-
<CloudIcon />
199-
</Box>
170+
{boxes.map(([transform, children], index) => {
171+
const isHighlighted = index === highlighted
172+
return (
173+
<Box
174+
key={index}
175+
transform={transform}
176+
fill={
177+
isHighlighted
178+
? "hsl(var(--color-neu-300))"
179+
: "hsl(var(--color-neu-100))"
180+
}
181+
className={
182+
isHighlighted
183+
? "[&_path]:fill-neu-800 dark:[&_path]:fill-neu-0"
184+
: undefined
185+
}
186+
>
187+
{children}
188+
</Box>
189+
)
190+
})}
200191
</>
201192
)
202193
}
@@ -213,8 +204,8 @@ function SVGDefinitions() {
213204
y2="41.7739"
214205
gradientUnits="userSpaceOnUse"
215206
>
216-
<stop stopColor="#F3F4F0" />
217-
<stop offset="1" stopColor="#A0A88A" />
207+
<stop stopColor="hsl(var(--color-neu-100))" />
208+
<stop offset="1" stopColor="hsl(var(--color-neu-600))" />
218209
</linearGradient>
219210
<linearGradient
220211
id="paint_lr_dark_linear_671_9150"
@@ -224,107 +215,31 @@ function SVGDefinitions() {
224215
y2="-17.6347"
225216
gradientUnits="userSpaceOnUse"
226217
>
227-
<stop stopColor="#DBDED3" />
228-
<stop offset="1" stopColor="#6D7557" />
229-
</linearGradient>
230-
<linearGradient
231-
id="paint9_linear_671_9150"
232-
x1="696"
233-
y1="320.46"
234-
x2="937.904"
235-
y2="320.46"
236-
gradientUnits="userSpaceOnUse"
237-
>
238-
<stop stopColor="#F3F4F0" />
239-
<stop offset="1" stopColor="#A0A88A" />
240-
</linearGradient>
241-
<linearGradient
242-
id="paint10_linear_671_9150"
243-
x1="696"
244-
y1="222.15"
245-
x2="937.904"
246-
y2="222.15"
247-
gradientUnits="userSpaceOnUse"
248-
>
249-
<stop stopColor="#F3F4F0" />
250-
<stop offset="1" stopColor="#A0A88A" />
251-
</linearGradient>
252-
<linearGradient
253-
id="paint11_linear_671_9150"
254-
x1="696"
255-
y1="420.945"
256-
x2="937.904"
257-
y2="420.945"
258-
gradientUnits="userSpaceOnUse"
259-
>
260-
<stop stopColor="#F3F4F0" />
261-
<stop offset="1" stopColor="#A0A88A" />
262-
</linearGradient>
263-
<linearGradient
264-
id="paint12_linear_671_9150"
265-
x1="696"
266-
y1="370.29"
267-
x2="875.922"
268-
y2="370.29"
269-
gradientUnits="userSpaceOnUse"
270-
>
271-
<stop stopColor="#F3F4F0" />
272-
<stop offset="1" stopColor="#A0A88A" />
273-
</linearGradient>
274-
<linearGradient
275-
id="paint13_linear_671_9150"
276-
x1="696"
277-
y1="270.805"
278-
x2="875.922"
279-
y2="270.805"
280-
gradientUnits="userSpaceOnUse"
281-
>
282-
<stop stopColor="#F3F4F0" />
283-
<stop offset="1" stopColor="#A0A88A" />
218+
<stop stopColor="hsl(var(--color-neu-700))" />
219+
<stop offset="1" stopColor="hsl(var(--color-neu-300))" />
284220
</linearGradient>
221+
285222
<linearGradient
286-
id="paint14_linear_671_9150"
223+
id="paint_sr_light_linear_671_9150"
287224
x1="696"
288-
y1="120.54"
225+
y1="0"
289226
x2="937.904"
290-
y2="120.54"
227+
y2="0"
291228
gradientUnits="userSpaceOnUse"
292229
>
293-
<stop stopColor="#F3F4F0" />
294-
<stop offset="1" stopColor="#A0A88A" />
230+
<stop stopColor="hsl(var(--color-neu-100))" />
231+
<stop offset="1" stopColor="hsl(var(--color-neu-600))" />
295232
</linearGradient>
296233
<linearGradient
297-
id="paint15_linear_671_9150"
234+
id="paint_sr_dark_linear_671_9150"
298235
x1="696"
299-
y1="20.0546"
236+
y1="0"
300237
x2="937.904"
301-
y2="20.0546"
302-
gradientUnits="userSpaceOnUse"
303-
>
304-
<stop stopColor="#F3F4F0" />
305-
<stop offset="1" stopColor="#A0A88A" />
306-
</linearGradient>
307-
<linearGradient
308-
id="paint16_linear_671_9150"
309-
x1="696"
310-
y1="70.7097"
311-
x2="875.922"
312-
y2="70.7097"
313-
gradientUnits="userSpaceOnUse"
314-
>
315-
<stop stopColor="#F3F4F0" />
316-
<stop offset="1" stopColor="#A0A88A" />
317-
</linearGradient>
318-
<linearGradient
319-
id="paint17_linear_671_9150"
320-
x1="696"
321-
y1="170.195"
322-
x2="875.922"
323-
y2="170.195"
238+
y2="0"
324239
gradientUnits="userSpaceOnUse"
325240
>
326-
<stop stopColor="#F3F4F0" />
327-
<stop offset="1" stopColor="#A0A88A" />
241+
<stop stopColor="hsl(var(--color-neu-700))" />
242+
<stop offset="1" stopColor="hsl(var(--color-neu-300))" />
328243
</linearGradient>
329244
<clipPath id="clip0_671_9150">
330245
<rect x="514" y="113.5" width="220" height="220" rx="8" fill="white" />
@@ -366,8 +281,8 @@ export function Wires({ className }: { className?: string }) {
366281
>
367282
<ClientEdges highlighted={step === 0 ? 0 : undefined} />
368283
<ClientBoxes highlighted={step === 0 ? 0 : undefined} />
369-
<ServerEdges />
370-
<ServerBoxes />
284+
<ServerEdges highlighted={step === 1 ? 0 : undefined} />
285+
<ServerBoxes highlighted={step === 1 ? 0 : undefined} />
371286
<SVGDefinitions />
372287
</svg>
373288
<QueryMdx components={components} />

0 commit comments

Comments
 (0)