@levo-so/blocks 0.1.74 → 0.1.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/package.json +4 -4
  2. package/src/blocks/about-us/about-us-1.schema.ts +0 -3
  3. package/src/blocks/blogs/ClientOnly.tsx +24 -0
  4. package/src/blocks/blogs/blog-listing-1.schema.ts +750 -111
  5. package/src/blocks/blogs/blog-listing-1.tsx +123 -41
  6. package/src/blocks/blogs/blog-listing-2.schema.ts +1127 -2640
  7. package/src/blocks/blogs/blog-listing-2.tsx +110 -23
  8. package/src/blocks/blogs/blog-listing-3.schema.ts +713 -2010
  9. package/src/blocks/blogs/blog-listing-3.tsx +118 -20
  10. package/src/blocks/blogs/blog-post-1.schema.ts +262 -32
  11. package/src/blocks/blogs/blog-post-1.tsx +217 -28
  12. package/src/blocks/cards/cards-16.schema.ts +947 -0
  13. package/src/blocks/cards/cards-16.tsx +106 -0
  14. package/src/blocks/cards/cards-17.schema.ts +1945 -0
  15. package/src/blocks/cards/cards-17.tsx +112 -0
  16. package/src/blocks/cards/cards-18.schema.ts +1040 -0
  17. package/src/blocks/cards/cards-18.tsx +102 -0
  18. package/src/blocks/cards/cards-2.schema.ts +2 -2
  19. package/src/blocks/cards/cards-3.schema.ts +3 -16
  20. package/src/blocks/cards/cards-4.schema.ts +3 -28
  21. package/src/blocks/cards/cards-7.schema.ts +4 -7
  22. package/src/blocks/cards/cards-8.schema.ts +1 -10
  23. package/src/blocks/carousel/carousel-2.schema.ts +1 -2
  24. package/src/blocks/content/content-10.schema.ts +450 -0
  25. package/src/blocks/content/content-10.tsx +43 -0
  26. package/src/blocks/content/content-3.schema.ts +22 -28
  27. package/src/blocks/content/content-5.schema.ts +0 -4
  28. package/src/blocks/cta/cta-1.schema.ts +0 -3
  29. package/src/blocks/event/event-details.schema.ts +41 -175
  30. package/src/blocks/event/event-details.tsx +45 -50
  31. package/src/blocks/event/event-listing-2.schema.ts +437 -202
  32. package/src/blocks/event/event-listing-2.tsx +86 -22
  33. package/src/blocks/event/event-listing-3.schema.ts +232 -196
  34. package/src/blocks/event/event-listing-3.tsx +62 -29
  35. package/src/blocks/event/event-listing-4.schema.ts +314 -2824
  36. package/src/blocks/event/event-listing-4.tsx +68 -32
  37. package/src/blocks/event/event-listing.schema.ts +176 -1032
  38. package/src/blocks/event/event-listing.tsx +59 -25
  39. package/src/blocks/features/features-1/variants/stylized-cards-v2.ts +0 -1
  40. package/src/blocks/features/features-4.schema.ts +4 -14
  41. package/src/blocks/features/features-5.schema.ts +30 -51
  42. package/src/blocks/features/features-6.schema.ts +0 -1
  43. package/src/blocks/filter-listing/filter-listing-1.schema.ts +1 -3
  44. package/src/blocks/footer/footer-3.schema.ts +6 -14
  45. package/src/blocks/hero/hero-11.schema.ts +25 -54
  46. package/src/blocks/hero/hero-5.schema.ts +2 -6
  47. package/src/blocks/hero/hero-6.schema.ts +1 -10
  48. package/src/blocks/index.ts +4 -0
  49. package/src/blocks/logos/logos-1.schema.ts +0 -30
  50. package/src/blocks/pricing/pricing-1.schema.ts +0 -3
  51. package/src/blocks/stats/variants/default.ts +4 -5
  52. package/src/blocks/team/team-2.schema.ts +57 -154
  53. package/src/blocks/team/team-3.schema.ts +14 -31
  54. package/src/blocks/testimonial/testimonial-4.schema.ts +67 -152
  55. package/src/blocks/testimonial/testimonial-5/variants/default.ts +0 -1
  56. package/src/blocks/testimonial/testimonial-5/variants/testimonialWithLogo.ts +0 -1
  57. package/src/blocks/testimonial/testimonial-5/variants/testimonialWithRatings.ts +0 -1
  58. package/src/schemas/blocks.ts +8 -0
@@ -0,0 +1,102 @@
1
+ import {
2
+ Box,
3
+ Button,
4
+ Container,
5
+ Heading,
6
+ Icon,
7
+ type ILevoBlockBaseProps,
8
+ Media,
9
+ Section,
10
+ Typography,
11
+ useContentEngine,
12
+ } from "@levo-so/studio";
13
+
14
+ import type { ICards18Content } from "./cards-18.schema";
15
+
16
+ const Cards18: React.FC<ILevoBlockBaseProps<ICards18Content>> = ({ content }) => {
17
+ const { data, meta, query, setQuery } = useContentEngine("cards");
18
+
19
+ const handleNext = () => setQuery({ page: (query?.page ?? 0) + 1 });
20
+ const handlePrevious = () => setQuery({ page: Math.max(0, (query?.page ?? 0) - 1) });
21
+
22
+ return (
23
+ <Section elementKey="layout">
24
+ <Container elementKey="container">
25
+ <Box elementKey="header-wrapper">
26
+ <Box elementKey="title-wrapper">
27
+ <Icon elementKey="header-icon" />
28
+ <Box elementKey="header-text-wrapper">
29
+ <Heading elementKey="header" />
30
+ <Typography elementKey="description" />
31
+ </Box>
32
+ </Box>
33
+ <Box elementKey="header-ctas_levoGroup" data-levo_group>
34
+ {content?.["header-ctas"]?.map((v, index: number) => (
35
+ <Button key={`header-ctas.${index}`} elementKey={`header-ctas.${index}.header-cta`} />
36
+ ))}
37
+ </Box>
38
+ </Box>
39
+ <Box elementKey="cards_levoGroup" data-levo_group>
40
+ {data &&
41
+ Array.isArray(data) &&
42
+ data?.map((item, index: number) => (
43
+ <Box key={`cards.${index}`} data-levo_group_item elementKey={`cards.${index}.card`}>
44
+ <Media elementKey={`cards.${index}.media`} alt="Card Media" />
45
+ <Box elementKey={`cards.${index}.card-info-wrapper`}>
46
+ <Box elementKey={`cards.${index}.card-content`}>
47
+ <Box elementKey={`cards.${index}.card-header-wrapper`}>
48
+ <Box elementKey={`cards.${index}.card-header`}>
49
+ <Icon elementKey={`cards.${index}.header-icon`} />
50
+ <Typography elementKey={`cards.${index}.publish-date`} />
51
+ </Box>
52
+ <Box elementKey={`cards.${index}.card-reading-time-wrapper`}>
53
+ <Icon elementKey={`cards.${index}.reading-time-icon`} />
54
+ <Typography elementKey={`cards.${index}.reading-time`} />
55
+ </Box>
56
+ </Box>
57
+ <Box elementKey={`cards.${index}.card-content-wrapper`}>
58
+ <Heading elementKey={`cards.${index}.title`} />
59
+ <Typography elementKey={`cards.${index}.description`} />
60
+ </Box>
61
+ <Box elementKey={`cards.${index}.card-footer`}>
62
+ <Box elementKey={`cards.${index}.card-author`}>
63
+ <Icon elementKey={`cards.${index}.author-image`} />
64
+ <Box elementKey={`cards.${index}.author-info-wrapper`}>
65
+ <Heading elementKey={`cards.${index}.author-name`} />
66
+ <Typography elementKey={`cards.${index}.author-description`} />
67
+ </Box>
68
+ </Box>
69
+ <Box elementKey={`cards.${index}.category_wrapper`}>
70
+ <Icon elementKey={`cards.${index}.category_icon`} />
71
+ <Typography elementKey={`cards.${index}.category`} />
72
+ </Box>
73
+ </Box>
74
+ </Box>
75
+ <Button elementKey={`cards.${index}.cta`} />
76
+ </Box>
77
+ </Box>
78
+ ))}
79
+ </Box>
80
+ {meta && (
81
+ <Box elementKey="pagination-wrapper">
82
+ <Button
83
+ elementKey="pagination-left"
84
+ disabled={query?.page === 1}
85
+ onClick={handlePrevious}
86
+ />
87
+ <Typography elementKey="pagination-text">
88
+ {`${query?.page || 0}/${meta?.pages || 0}`}
89
+ </Typography>
90
+ <Button
91
+ elementKey="pagination-right"
92
+ onClick={handleNext}
93
+ disabled={query?.page === meta?.pages}
94
+ />
95
+ </Box>
96
+ )}
97
+ </Container>
98
+ </Section>
99
+ );
100
+ };
101
+
102
+ export default Cards18;
@@ -228,7 +228,7 @@ export const Cards2: IBlock = {
228
228
  "border-radius": "base",
229
229
  "object-fit": "contain",
230
230
  display: "flex",
231
- "media:max:640px": {
231
+ tablet: {
232
232
  display: "none",
233
233
  },
234
234
  "align-items": "end",
@@ -245,7 +245,7 @@ export const Cards2: IBlock = {
245
245
  "border-radius-bottom-right": "3xl",
246
246
  "object-fit": "contain",
247
247
  display: "none",
248
- "media:max:640px": {
248
+ tablet: {
249
249
  display: "block",
250
250
  },
251
251
  },
@@ -149,25 +149,22 @@ export const Cards3: IBlock = {
149
149
  mobile: {
150
150
  "grid-template-columns": "repeat(1, minmax(0, 1fr))",
151
151
  "row-gap": "xl",
152
- filter: "none",
153
152
  },
154
- filter: "none",
153
+
155
154
  "flex-direction": "column",
156
155
  },
157
156
  text_content: {
158
157
  display: "flex",
159
158
  "flex-direction": "row",
160
159
  "row-gap": "base",
161
- filter: "none",
160
+
162
161
  width: "100%",
163
162
  "justify-content": "space-between",
164
163
  "align-items": "center",
165
164
  mobile: {
166
- filter: "none",
167
165
  "flex-direction": "column",
168
166
  },
169
167
  tablet: {
170
- filter: "none",
171
168
  "flex-direction": "row",
172
169
  "justify-content": "start",
173
170
  "align-items": "start",
@@ -191,12 +188,11 @@ export const Cards3: IBlock = {
191
188
  width: "100%",
192
189
  height: "500px",
193
190
  "border-radius": "base",
194
- filter: "none",
191
+
195
192
  "object-fit": "cover",
196
193
  "margin-top": "8xl",
197
194
  "margin-bottom": "3xl",
198
195
  mobile: {
199
- filter: "none",
200
196
  height: "100%",
201
197
  "margin-top": "xl",
202
198
  "margin-bottom": "none",
@@ -213,14 +209,11 @@ export const Cards3: IBlock = {
213
209
  tablet: {
214
210
  "flex-direction": "row",
215
211
  "row-gap": "xl",
216
- filter: "none",
217
212
  },
218
213
  mobile: {
219
214
  "flex-direction": "column",
220
215
  "row-gap": "lg",
221
- filter: "none",
222
216
  },
223
- filter: "none",
224
217
  },
225
218
  "stats_cards.$.card": {
226
219
  display: "flex",
@@ -249,12 +242,10 @@ export const Cards3: IBlock = {
249
242
  stats_cards: [
250
243
  {
251
244
  separator: {
252
- filter: "none",
253
245
  height: "100px",
254
246
  width: "1px",
255
247
  "background-color": "black",
256
248
  mobile: {
257
- filter: "none",
258
249
  display: "none",
259
250
  },
260
251
  },
@@ -273,12 +264,10 @@ export const Cards3: IBlock = {
273
264
  },
274
265
  },
275
266
  separator: {
276
- filter: "none",
277
267
  height: "100px",
278
268
  width: "1px",
279
269
  "background-color": "black",
280
270
  mobile: {
281
- filter: "none",
282
271
  display: "none",
283
272
  },
284
273
  },
@@ -293,12 +282,10 @@ export const Cards3: IBlock = {
293
282
  },
294
283
  label: {},
295
284
  separator: {
296
- filter: "none",
297
285
  height: "100px",
298
286
  width: "1px",
299
287
  "background-color": "black",
300
288
  mobile: {
301
- filter: "none",
302
289
  display: "none",
303
290
  },
304
291
  },
@@ -332,23 +332,19 @@ export const Cards4: IBlock = {
332
332
  },
333
333
  details: {},
334
334
  ctas_levoGroup: {
335
- filter: "none",
336
335
  display: "flex",
337
336
  "column-gap": "xs",
338
337
  "margin-top": "lg",
339
338
  mobile: {
340
- filter: "none",
341
339
  "flex-direction": "column",
342
340
  "row-gap": "xs",
343
341
  },
344
342
  tablet: {
345
- filter: "none",
346
343
  "flex-direction": "column",
347
344
  "row-gap": "xs",
348
345
  },
349
346
  },
350
347
  content_wrapper: {
351
- filter: "none",
352
348
  display: "flex",
353
349
  "flex-direction": "column",
354
350
  "row-gap": "sm",
@@ -390,23 +386,19 @@ export const Cards4: IBlock = {
390
386
  },
391
387
  details: {},
392
388
  ctas_levoGroup: {
393
- filter: "none",
394
389
  display: "flex",
395
390
  "column-gap": "xs",
396
391
  "margin-top": "lg",
397
392
  mobile: {
398
- filter: "none",
399
393
  "flex-direction": "column",
400
394
  "row-gap": "xs",
401
395
  },
402
396
  tablet: {
403
- filter: "none",
404
397
  "flex-direction": "column",
405
398
  "row-gap": "xs",
406
399
  },
407
400
  },
408
401
  content_wrapper: {
409
- filter: "none",
410
402
  display: "flex",
411
403
  "flex-direction": "column",
412
404
  "row-gap": "sm",
@@ -416,9 +408,7 @@ export const Cards4: IBlock = {
416
408
  button: {},
417
409
  },
418
410
  {
419
- button: {
420
- filter: "none",
421
- },
411
+ button: {},
422
412
  },
423
413
  ],
424
414
  },
@@ -450,23 +440,19 @@ export const Cards4: IBlock = {
450
440
  },
451
441
  details: {},
452
442
  ctas_levoGroup: {
453
- filter: "none",
454
443
  display: "flex",
455
444
  "column-gap": "xs",
456
445
  "margin-top": "lg",
457
446
  mobile: {
458
- filter: "none",
459
447
  "flex-direction": "column",
460
448
  "row-gap": "xs",
461
449
  },
462
450
  tablet: {
463
- filter: "none",
464
451
  "flex-direction": "column",
465
452
  "row-gap": "xs",
466
453
  },
467
454
  },
468
455
  content_wrapper: {
469
- filter: "none",
470
456
  display: "flex",
471
457
  "flex-direction": "column",
472
458
  "row-gap": "sm",
@@ -476,9 +462,7 @@ export const Cards4: IBlock = {
476
462
  button: {},
477
463
  },
478
464
  {
479
- button: {
480
- filter: "none",
481
- },
465
+ button: {},
482
466
  },
483
467
  ],
484
468
  },
@@ -510,23 +494,19 @@ export const Cards4: IBlock = {
510
494
  },
511
495
  details: {},
512
496
  ctas_levoGroup: {
513
- filter: "none",
514
497
  display: "flex",
515
498
  "column-gap": "xs",
516
499
  "margin-top": "lg",
517
500
  mobile: {
518
- filter: "none",
519
501
  "flex-direction": "column",
520
502
  "row-gap": "xs",
521
503
  },
522
504
  tablet: {
523
- filter: "none",
524
505
  "flex-direction": "column",
525
506
  "row-gap": "xs",
526
507
  },
527
508
  },
528
509
  content_wrapper: {
529
- filter: "none",
530
510
  display: "flex",
531
511
  "flex-direction": "column",
532
512
  "row-gap": "sm",
@@ -536,25 +516,20 @@ export const Cards4: IBlock = {
536
516
  button: {},
537
517
  },
538
518
  {
539
- button: {
540
- filter: "none",
541
- },
519
+ button: {},
542
520
  },
543
521
  ],
544
522
  },
545
523
  ],
546
524
  header_button_rightIcon: {
547
525
  width: "18px",
548
- filter: "none",
549
526
  },
550
527
  grid_levoGroup: {
551
- filter: "none",
552
528
  display: "grid",
553
529
  "grid-template-columns": "repeat(2, minmax(0, 1fr))",
554
530
  "row-gap": "xl",
555
531
  "column-gap": "xl",
556
532
  mobile: {
557
- filter: "none",
558
533
  "grid-template-columns": "repeat(1, minmax(0, 1fr))",
559
534
  },
560
535
  },
@@ -861,7 +861,7 @@ export const Cards7: IBlock = {
861
861
  mobile: {
862
862
  width: "40px",
863
863
  height: "40px",
864
- filter: "none",
864
+
865
865
  "padding-top": "none",
866
866
  "padding-bottom": "none",
867
867
  "padding-left": "none",
@@ -884,7 +884,7 @@ export const Cards7: IBlock = {
884
884
  mobile: {
885
885
  width: "40px",
886
886
  height: "40px",
887
- filter: "none",
887
+
888
888
  "font-size": "xs",
889
889
  },
890
890
  "padding-top": "none",
@@ -894,7 +894,6 @@ export const Cards7: IBlock = {
894
894
  "column-gap": "none",
895
895
  color: "text-3",
896
896
  tablet: {
897
- filter: "none",
898
897
  display: "none",
899
898
  },
900
899
  },
@@ -1624,7 +1623,7 @@ export const Cards7: IBlock = {
1624
1623
  mobile: {
1625
1624
  width: "40px",
1626
1625
  height: "40px",
1627
- filter: "none",
1626
+
1628
1627
  "padding-top": "none",
1629
1628
  "padding-bottom": "none",
1630
1629
  "padding-left": "none",
@@ -1647,7 +1646,7 @@ export const Cards7: IBlock = {
1647
1646
  mobile: {
1648
1647
  width: "40px",
1649
1648
  height: "40px",
1650
- filter: "none",
1649
+
1651
1650
  "font-size": "xs",
1652
1651
  },
1653
1652
  "padding-top": "none",
@@ -1657,7 +1656,6 @@ export const Cards7: IBlock = {
1657
1656
  "column-gap": "none",
1658
1657
  color: "text-3",
1659
1658
  tablet: {
1660
- filter: "none",
1661
1659
  display: "none",
1662
1660
  },
1663
1661
  },
@@ -1934,7 +1932,6 @@ export const Cards7: IBlock = {
1934
1932
  "&:hover": {
1935
1933
  "background-color": "var(--color-brand-secondary)",
1936
1934
  },
1937
- filter: "none",
1938
1935
  },
1939
1936
  },
1940
1937
  config: {
@@ -288,13 +288,11 @@ export const Cards8: IBlock = {
288
288
  },
289
289
  header_buttons: [{}, {}],
290
290
  grid_levoGroup: {
291
- filter: "none",
292
291
  display: "grid",
293
292
  "grid-template-columns": "repeat(2, minmax(0, 1fr))",
294
293
  "row-gap": "xl",
295
294
  "column-gap": "xl",
296
295
  mobile: {
297
- filter: "none",
298
296
  "grid-template-columns": "repeat(1, minmax(0, 1fr))",
299
297
  },
300
298
  },
@@ -341,24 +339,20 @@ export const Cards8: IBlock = {
341
339
  "margin-bottom": "lg",
342
340
  },
343
341
  content_container: {
344
- filter: "none",
345
342
  display: "flex",
346
343
  "align-items": "start",
347
344
  "column-gap": "lg",
348
345
  mobile: {
349
- filter: "none",
350
346
  "flex-direction": "column",
351
347
  "row-gap": "lg",
352
348
  },
353
349
  tablet: {
354
- filter: "none",
355
350
  "flex-direction": "column",
356
351
  "row-gap": "lg",
357
352
  },
358
353
  "justify-content": "start",
359
354
  },
360
355
  text_section: {
361
- filter: "none",
362
356
  display: "flex",
363
357
  "flex-direction": "column",
364
358
  "row-gap": "sm",
@@ -372,16 +366,14 @@ export const Cards8: IBlock = {
372
366
  "flex-direction": "row",
373
367
  "align-items": "center",
374
368
  gap: "sm",
375
- filter: "none",
369
+
376
370
  "border-radius": "base",
377
371
  "flex-shrink": "0",
378
372
  mobile: {
379
- filter: "none",
380
373
  "flex-direction": "column",
381
374
  width: "100%",
382
375
  },
383
376
  tablet: {
384
- filter: "none",
385
377
  "flex-direction": "column",
386
378
  width: "100%",
387
379
  },
@@ -397,7 +389,6 @@ export const Cards8: IBlock = {
397
389
  })),
398
390
  header_button_rightIcon: {
399
391
  width: "18px",
400
- filter: "none",
401
392
  },
402
393
  header_buttons_levoGroupItem: {
403
394
  header_button: {},
@@ -1107,7 +1107,6 @@ export const Carousel2: IBlock = {
1107
1107
  display: "flex",
1108
1108
  "column-gap": "2xs",
1109
1109
  "align-items": "center",
1110
- filter: "none",
1111
1110
  },
1112
1111
  "carousel-navigation-pill": {
1113
1112
  width: "8px",
@@ -1115,7 +1114,7 @@ export const Carousel2: IBlock = {
1115
1114
  "border-radius": "8px",
1116
1115
  "background-color": "var(--color-border)",
1117
1116
  cursor: "pointer",
1118
- filter: "none",
1117
+
1119
1118
  transition: "all 0.3s ease",
1120
1119
  },
1121
1120
  "carousel-navigation-arrow-left": {