Skip to content

Commit 87fb970

Browse files
DevWeb13DevWeb13
committed
feat: Add functionnality open/close at component header of main
1 parent 55b68ed commit 87fb970

File tree

7 files changed

+1567
-117
lines changed

7 files changed

+1567
-117
lines changed

‎.prettierignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ bazel-qwik
1111
bazel-testlogs
1212
dist
1313
dist-dev
14-
lib
14+
# lib
1515
lib-types
1616
etc
1717
external

‎src/assets/svg/bookSvg/bookSvg.tsx

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,12 @@ const FeFloodDuplicate = ({ result }: FeFloodDuplicateProps) => (
6060
</>
6161
);
6262

63-
export const BookSvg = ({ small }: { small?: boolean }) =>
63+
interface BookSvgProps {
64+
small?: boolean;
65+
id: string;
66+
}
67+
68+
export const BookSvg = ({ small, id }: BookSvgProps) =>
6469
small ? (
6570
<svg
6671
fill="none"
@@ -69,24 +74,24 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
6974
width="32"
7075
xmlns="http://www.w3.org/2000/svg"
7176
>
72-
<g filter="url(#filter0_iii_126_16757)">
73-
<g clip-path="url(#clip0_126_16757)">
77+
<g filter={`url(#filter0_iii_${id})`}>
78+
<g clip-path={`url(#clip0_${id})`}>
7479
<path
7580
d="M0 4C0 1.79086 1.79086 0 4 0H30C31.1046 0 32 0.895431 32 2V38C32 39.1046 31.1046 40 30 40H4C1.79086 40 0 38.2091 0 36V4Z"
7681
fill="#303030"
7782
></path>
7883
<path
7984
d="M0 4C0 1.79086 1.79086 0 4 0H30C31.1046 0 32 0.895431 32 2V38C32 39.1046 31.1046 40 30 40H4C1.79086 40 0 38.2091 0 36V4Z"
80-
fill="url(#paint0_linear_126_16757)"
85+
fill={`url(#paint0_linear_${id})`}
8186
></path>
8287
<rect
83-
fill="url(#paint1_linear_126_16757)"
88+
fill={`url(#paint1_linear_${id})`}
8489
height="40"
8590
opacity="0.2"
8691
width="8"
8792
></rect>
8893
<rect
89-
fill="url(#paint2_linear_126_16757)"
94+
fill={`url(#paint2_linear_${id})`}
9095
height="40"
9196
opacity="0.05"
9297
width="8"
@@ -98,13 +103,13 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
98103
width="26"
99104
></rect>
100105
<rect
101-
fill="url(#paint3_linear_126_16757)"
106+
fill={`url(#paint3_linear_${id})`}
102107
fill-opacity="0.7"
103108
height="40"
104109
transform="translate(6)"
105110
width="26"
106111
></rect>
107-
<g filter="url(#filter1_d_126_16757)">
112+
<g filter={`url(#filter1_d_${id})`}>
108113
<path
109114
d="M20 -8C20 -8.55228 20.4477 -9 21 -9H27C27.5523 -9 28 -8.55228 28 -8V6.79623C28 7.65539 26.9881 8.11457 26.3405 7.54881L24.6585 6.07619C24.2815 5.74629 23.7185 5.74629 23.3415 6.07619L21.6585 7.54881C21.0119 8.11457 20 7.65539 20 6.79623V-8Z"
110115
fill="#3291FF"
@@ -122,12 +127,12 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
122127
color-interpolation-filters="s-rGB"
123128
filterUnits="userSpaceOnUse"
124129
height="41"
125-
id="filter0_iii_126_16757"
130+
id={`filter0_iii_${id}`}
126131
width="36"
127132
x="0"
128133
y="0"
129134
>
130-
<FeFloodDuplicate result="effect1_innerShadow_126_16757" />
135+
<FeFloodDuplicate result={`effect1_innerShadow_${id}`} />
131136

132137
<feColorMatrix
133138
in="SourceAlpha"
@@ -148,9 +153,9 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
148153
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"
149154
></feColorMatrix>
150155
<feBlend
151-
in2="effect1_innerShadow_126_16757"
156+
in2={`effect1_innerShadow_${id}`}
152157
mode="normal"
153-
result="effect2_innerShadow_126_16757"
158+
result={`effect2_innerShadow_${id}`}
154159
></feBlend>
155160
<feColorMatrix
156161
in="SourceAlpha"
@@ -170,14 +175,14 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
170175
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"
171176
></feColorMatrix>
172177
<feBlend
173-
in2="effect2_innerShadow_126_16757"
178+
in2={`effect2_innerShadow_${id}`}
174179
mode="normal"
175-
result="effect3_innerShadow_126_16757"
180+
result={`effect3_innerShadow_${id}`}
176181
></feBlend>
177182
</filter>
178183
<linearGradient
179184
gradientUnits="userSpaceOnUse"
180-
id="paint0_linear_126_16757"
185+
id={`paint0_linear_${id}`}
181186
x1="16"
182187
x2="16"
183188
y1="0"
@@ -189,7 +194,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
189194
</linearGradient>
190195
<linearGradient
191196
gradientUnits="userSpaceOnUse"
192-
id="paint1_linear_126_16757"
197+
id={`paint1_linear_${id}`}
193198
x1="0"
194199
x2="8"
195200
y1="17.75"
@@ -199,7 +204,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
199204
</linearGradient>
200205
<linearGradient
201206
gradientUnits="userSpaceOnUse"
202-
id="paint2_linear_126_16757"
207+
id={`paint2_linear_${id}`}
203208
x1="0"
204209
x2="8"
205210
y1="17.75"
@@ -209,7 +214,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
209214
</linearGradient>
210215
<linearGradient
211216
gradientUnits="userSpaceOnUse"
212-
id="paint3_linear_126_16757"
217+
id={`paint3_linear_${id}`}
213218
x1="2.71429"
214219
x2="32.067"
215220
y1="4.24102e-07"
@@ -220,7 +225,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
220225
</linearGradient>
221226
<linearGradient
222227
gradientUnits="userSpaceOnUse"
223-
id="paint4_linear_126_16757"
228+
id={`paint4_linear_${id}`}
224229
x1="22.13"
225230
x2="22.13"
226231
y1="17"
@@ -233,7 +238,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
233238
</linearGradient>
234239
<linearGradient
235240
gradientUnits="userSpaceOnUse"
236-
id="paint5_linear_126_16757"
241+
id={`paint5_linear_${id}`}
237242
x1="20.9375"
238243
x2="24.5574"
239244
y1="21.0625"
@@ -242,13 +247,13 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
242247
<stop stop-color="white"></stop>
243248
<stop offset="1" stop-color="white" stop-opacity="0"></stop>
244249
</linearGradient>
245-
<clipPath id="clip0_126_16757">
250+
<clipPath id={`clip0_${id}`}>
246251
<path
247252
d="M0 4C0 1.79086 1.79086 0 4 0H30C31.1046 0 32 0.895431 32 2V38C32 39.1046 31.1046 40 30 40H4C1.79086 40 0 38.2091 0 36V4Z"
248253
fill="white"
249254
></path>
250255
</clipPath>
251-
<clipPath id="clip1_126_16757">
256+
<clipPath id={`clip1_${id}`}>
252257
<rect
253258
fill="white"
254259
height="16"
@@ -258,7 +263,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
258263
</clipPath>
259264
</defs>
260265
<div class="absolute left-2.5 top-3.5">
261-
<QwikLogo width={16} height={16} />
266+
<QwikLogo width={16} height={16} id={id} />
262267
</div>
263268
</svg>
264269
) : (
@@ -269,25 +274,25 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
269274
width="160"
270275
xmlns="http://www.w3.org/2000/svg"
271276
>
272-
<g filter="url(#filter0_iii_439_2947)">
273-
<g clip-path="url(#clip0_439_2947)">
277+
<g filter={`url(#filter0_iii_${id})`}>
278+
<g clip-path={`url(#clip0_${id})`}>
274279
<path
275280
d="M0 7.00001C0 3.6863 2.68629 1 6 1H158C159.105 1 160 1.89543 160 3V179C160 180.105 159.105 181 158 181H6C2.6863 181 0 178.314 0 175V7.00001Z"
276281
fill="#303030"
277282
></path>
278283
<path
279284
d="M0 7.00001C0 3.6863 2.68629 1 6 1H158C159.105 1 160 1.89543 160 3V179C160 180.105 159.105 181 158 181H6C2.6863 181 0 178.314 0 175V7.00001Z"
280-
fill="url(#paint0_linear_439_2947)"
285+
fill={`url(#paint0_linear_${id})`}
281286
></path>
282287
<rect
283-
fill="url(#paint1_linear_439_2947)"
288+
fill={`url(#paint1_linear_${id})`}
284289
height="320"
285290
opacity="0.2"
286291
width="24"
287292
y="1"
288293
></rect>
289294
<rect
290-
fill="url(#paint2_linear_439_2947)"
295+
fill={`url(#paint2_linear_${id})`}
291296
height="320"
292297
opacity="0.05"
293298
width="24"
@@ -300,7 +305,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
300305
width="142"
301306
></rect>
302307
<rect
303-
fill="url(#paint3_linear_439_2947)"
308+
fill={`url(#paint3_linear_${id})`}
304309
fill-opacity="0.7"
305310
height="180"
306311
transform="translate(18 1)"
@@ -313,7 +318,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
313318
stroke-opacity="0.02"
314319
></path>
315320
</g>
316-
<g filter="url(#filter1_d_439_2947)">
321+
<g filter={`url(#filter1_d_${id})`}>
317322
<path
318323
d="M122 1C122 0.447716 122.448 0 123 0H137C137.552 0 138 0.447715 138 1V22.259C138 23.0308 137.163 23.5116 136.496 23.1227L130.504 19.6273C130.193 19.4456 129.807 19.4456 129.496 19.6273L123.504 23.1227C122.837 23.5116 122 23.0308 122 22.259V1Z"
319324
fill="#3291FF"
@@ -324,12 +329,12 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
324329
color-interpolation-filters="s-rGB"
325330
filterUnits="userSpaceOnUse"
326331
height="181"
327-
id="filter0_iii_439_2947"
332+
id={`filter0_iii_${id}`}
328333
width="164"
329334
x="0"
330335
y="1"
331336
>
332-
<FeFloodDuplicate result="effect1_innerShadow_439_2947" />
337+
<FeFloodDuplicate result={`effect1_innerShadow_${id}`} />
333338

334339
<feColorMatrix
335340
in="SourceAlpha"
@@ -350,9 +355,9 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
350355
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"
351356
></feColorMatrix>
352357
<feBlend
353-
in2="effect1_innerShadow_439_2947"
358+
in2={`effect1_innerShadow_${id}`}
354359
mode="normal"
355-
result="effect2_innerShadow_439_2947"
360+
result={`effect2_innerShadow_${id}`}
356361
></feBlend>
357362
<feColorMatrix
358363
in="SourceAlpha"
@@ -372,16 +377,16 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
372377
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"
373378
></feColorMatrix>
374379
<feBlend
375-
in2="effect2_innerShadow_439_2947"
380+
in2={`effect2_innerShadow_${id}`}
376381
mode="normal"
377-
result="effect3_innerShadow_439_2947"
382+
result={`effect3_innerShadow_${id}`}
378383
></feBlend>
379384
</filter>
380385
<filter
381386
color-interpolation-filters="s-rGB"
382387
filterUnits="userSpaceOnUse"
383388
height="25.2605"
384-
id="filter1_d_439_2947"
389+
id={`filter1_d_${id}`}
385390
width="18"
386391
x="121"
387392
y="0"
@@ -403,18 +408,18 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
403408
<feBlend
404409
in2="BackgroundImageFix"
405410
mode="normal"
406-
result="effect1_dropShadow_439_2947"
411+
result={`effect1_dropShadow_${id}`}
407412
></feBlend>
408413
<feBlend
409414
in="SourceGraphic"
410-
in2="effect1_dropShadow_439_2947"
415+
in2={`effect1_dropShadow_${id}`}
411416
mode="normal"
412417
result="shape"
413418
></feBlend>
414419
</filter>
415420
<linearGradient
416421
gradientUnits="userSpaceOnUse"
417-
id="paint0_linear_439_2947"
422+
id={`paint0_linear_${id}`}
418423
x1="80"
419424
x2="80"
420425
y1="1"
@@ -426,7 +431,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
426431
</linearGradient>
427432
<linearGradient
428433
gradientUnits="userSpaceOnUse"
429-
id="paint1_linear_439_2947"
434+
id={`paint1_linear_${id}`}
430435
x1="0"
431436
x2="24"
432437
y1="143"
@@ -436,7 +441,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
436441
</linearGradient>
437442
<linearGradient
438443
gradientUnits="userSpaceOnUse"
439-
id="paint2_linear_439_2947"
444+
id={`paint2_linear_${id}`}
440445
x1="0"
441446
x2="24"
442447
y1="143"
@@ -446,7 +451,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
446451
</linearGradient>
447452
<linearGradient
448453
gradientUnits="userSpaceOnUse"
449-
id="paint3_linear_439_2947"
454+
id={`paint3_linear_${id}`}
450455
x1="14.8242"
451456
x2="146.106"
452457
y1="1.90846e-06"
@@ -457,7 +462,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
457462
</linearGradient>
458463
<linearGradient
459464
gradientUnits="userSpaceOnUse"
460-
id="paint4_linear_439_2947"
465+
id={`paint4_linear_${id}`}
461466
x1="132.956"
462467
x2="138.478"
463468
y1="155.122"
@@ -468,7 +473,7 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
468473
</linearGradient>
469474
<linearGradient
470475
gradientUnits="userSpaceOnUse"
471-
id="paint5_linear_439_2947"
476+
id={`paint5_linear_${id}`}
472477
x1="134.822"
473478
x2="134.791"
474479
y1="145.4"
@@ -477,15 +482,15 @@ export const BookSvg = ({ small }: { small?: boolean }) =>
477482
<stop stop-color="white"></stop>
478483
<stop offset="1" stop-color="white" stop-opacity="0"></stop>
479484
</linearGradient>
480-
<clipPath id="clip0_439_2947">
485+
<clipPath id={`clip0_${id}`}>
481486
<path
482487
d="M0 7.00001C0 3.6863 2.68629 1 6 1H158C159.105 1 160 1.89543 160 3V179C160 180.105 159.105 181 158 181H6C2.6863 181 0 178.314 0 175V7.00001Z"
483488
fill="white"
484489
></path>
485490
</clipPath>
486491
</defs>
487492
<div class="absolute bottom-3 right-3">
488-
<QwikLogo />
493+
<QwikLogo id={id} />
489494
</div>
490495
</svg>
491496
);

0 commit comments

Comments
 (0)