@levo-so/blocks 0.1.75 → 0.1.77

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
package/src/blocks/blogs/blog-listing-2.tsx CHANGED
@@ -1,4 +1,8 @@
1
+ import type { IModuleStudioConfig, IPost } from "@levo-so/core";
1
2
  import {
3
+ Avatar,
4
+ AvatarFallbackV2,
5
+ AvatarImageV2,
2
6
  Box,
3
7
  Button,
4
8
  Container,
@@ -8,54 +12,137 @@ import {
8
12
  Media,
9
13
  Section,
10
14
  Typography,
11
- useContentEngine,
15
+ useBlockContext,
16
+ useContextEngine,
12
17
  } from "@levo-so/studio";
13
18
  import dayjs from "dayjs";
14
19
 
20
+ import { ClientOnly } from "../event/ClientOnly";
15
21
  import type { IBlogListing2Content } from "./blog-listing-2.schema";
16
22
 
17
- const BlogListing2: React.FC<ILevoBlockBaseProps<IBlogListing2Content>> = () => {
18
- const { data, query, setQuery, meta } = useContentEngine("blogs");
23
+ /** */
24
+ interface IBlogMeta {
25
+ total: number;
26
+ pages: number;
27
+ blog?: {
28
+ studio_config?: IModuleStudioConfig[];
29
+ };
30
+ }
31
+
32
+ const BlogListing2: React.FC<ILevoBlockBaseProps<IBlogListing2Content>> = ({ content }) => {
33
+ const { response, query, setQuery } = useContextEngine<IPost, IBlogMeta>("blogs");
34
+ const { isBuilder } = useBlockContext();
19
35
 
20
36
  const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
21
37
  const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
22
38
 
39
+ const studioConfig = response?.meta?.blog?.studio_config?.find((item) => !item.block_instance_id);
40
+
23
41
  return (
24
42
  <Section elementKey="layout">
25
43
  <Container elementKey="container">
26
44
  <Box elementKey="header-wrapper">
27
45
  <Box elementKey="title-wrapper">
28
46
  <Icon elementKey="header-icon" />
29
- <Heading elementKey="header" />
47
+ <Box elementKey="header-text-wrapper">
48
+ <Heading elementKey="header" />
49
+ <Typography elementKey="description" />
50
+ </Box>
51
+ </Box>
52
+ <Box elementKey="header-ctas_levoGroup" data-levo_group>
53
+ {content?.["header-ctas"]?.map((v, index: number) => (
54
+ <Button
55
+ key={`header-ctas.${index}`}
56
+ elementKey={`header-ctas.${index}.header-cta`}
57
+ data-levo_group_item
58
+ />
59
+ ))}
30
60
  </Box>
31
- <Button elementKey="header-cta" />
32
61
  </Box>
33
62
  <Box elementKey="blogs_levoGroup" data-levo_group>
34
- {(data || [])?.map((item: any, index: number) => (
35
- <Box key={`blogs.${index}`} data-levo_group_item elementKey={`blogs.${index}.blog`}>
36
- <Media elementKey={`blogs.${index}.media`} alt="Blog Media" />
63
+ {response?.data?.map((item, index: number) => (
64
+ <Box
65
+ key={`blogs.${index}`}
66
+ data-levo_group_item
67
+ elementKey={`blogs.${index}.blog`}
68
+ config={
69
+ (isBuilder && studioConfig?.preview_url) || (!isBuilder && studioConfig?.live_url)
70
+ ? {
71
+ action: {
72
+ type: "external_link",
73
+ value:
74
+ isBuilder && studioConfig.preview_url
75
+ ? studioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
76
+ : !isBuilder && studioConfig.live_url
77
+ ? studioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
78
+ : "",
79
+ options: {},
80
+ },
81
+ }
82
+ : {}
83
+ }
84
+ >
85
+ <Media
86
+ elementKey={`blogs.${index}.media`}
87
+ alt="Blog Media"
88
+ media={item?.cover_image ?? undefined}
89
+ />
37
90
  <Box elementKey={`blogs.${index}.blog-info-wrapper`}>
38
91
  <Box elementKey={`blogs.${index}.blog-content`}>
39
- <Box elementKey={`blogs.${index}.blog-header`}>
40
- <Icon elementKey={`blogs.${index}.header-icon`} />
41
- <Typography elementKey={`blogs.${index}.blog-type`} />
92
+ <Box elementKey={`blogs.${index}.blog-header-wrapper`}>
93
+ {item?.published_at && dayjs(item?.published_at).isValid() && (
94
+ <Box elementKey={`blogs.${index}.dateWrapper`}>
95
+ <Icon elementKey={`blogs.${index}.dateIcon`} />
96
+ <ClientOnly>
97
+ <Typography elementKey={`blogs.${index}.date`}>
98
+ {dayjs(item?.published_at).format("MMM D, YYYY")}
99
+ </Typography>
100
+ </ClientOnly>
101
+ </Box>
102
+ )}
103
+ <Box elementKey={`blogs.${index}.blog-header`}>
104
+ <Icon elementKey={`blogs.${index}.header-icon`} />
105
+ <Typography elementKey={`blogs.${index}.blog-type`}>
106
+ {item?.categories?.[0]?.name || "Blog"}
107
+ </Typography>
108
+ </Box>
42
109
  </Box>
43
- <Box elementKey={`blogs.${index}.dateWrapper`}>
44
- <Icon elementKey={`blogs.${index}.dateIcon`} />
45
- <Typography elementKey={`blogs.${index}.date`}>
46
- {dayjs(item?.date).format("MMM D, YYYY")}
110
+ <Box elementKey={`blogs.${index}.blog-content-wrapper`}>
111
+ <Heading elementKey={`blogs.${index}.title`}>{item?.title}</Heading>
112
+ <Typography elementKey={`blogs.${index}.description`}>
113
+ {item?.summary}
47
114
  </Typography>
48
115
  </Box>
49
- <Heading elementKey={`blogs.${index}.title`} />
50
- <Typography elementKey={`blogs.${index}.description`} />
51
116
  <Box elementKey={`blogs.${index}.blog-footer`}>
52
117
  <Box elementKey={`blogs.${index}.blog-author`}>
53
- <Icon elementKey={`blogs.${index}.author-image`} />
54
- <Typography elementKey={`blogs.${index}.author-name`} />
118
+ <Avatar className="h-10 w-10">
119
+ <AvatarImageV2 src={item?.authors?.[0]?.profile_picture?.location} />
120
+ <AvatarFallbackV2>
121
+ {[item?.authors?.[0]?.first_name, item?.authors?.[0]?.last_name]
122
+ ?.map((v) => v?.[0])
123
+ .filter(Boolean)
124
+ .join("")
125
+ .toUpperCase()}
126
+ </AvatarFallbackV2>
127
+ </Avatar>
128
+ <Box elementKey={`blogs.${index}.author-info-wrapper`}>
129
+ <Typography elementKey={`blogs.${index}.author-name`}>
130
+ {item?.authors?.[0]
131
+ ? [item?.authors?.[0]?.first_name, item?.authors?.[0]?.last_name]
132
+ .filter(Boolean)
133
+ .join(" ")
134
+ : "Anonymous"}
135
+ </Typography>
136
+ <Typography elementKey={`blogs.${index}.author-description`}>
137
+ {item?.authors?.[0]?.bio || "Author"}
138
+ </Typography>
139
+ </Box>
55
140
  </Box>
56
141
  <Box elementKey={`blogs.${index}.blog-reading-time-wrapper`}>
57
142
  <Icon elementKey={`blogs.${index}.reading-time-icon`} />
58
- <Typography elementKey={`blogs.${index}.reading-time`} />
143
+ <Typography elementKey={`blogs.${index}.reading-time`}>
144
+ {item?.reading_time ? `${item?.reading_time} min read` : "5 min read"}
145
+ </Typography>
59
146
  </Box>
60
147
  </Box>
61
148
  </Box>
@@ -64,7 +151,7 @@ const BlogListing2: React.FC<ILevoBlockBaseProps<IBlogListing2Content>> = () =>
64
151
  </Box>
65
152
  ))}
66
153
  </Box>
67
- {(meta?.pages || 0) > 1 && (
154
+ {response?.meta && (
68
155
  <Box elementKey="pagination-wrapper">
69
156
  <Button
70
157
  elementKey="pagination-left"
@@ -72,12 +159,12 @@ const BlogListing2: React.FC<ILevoBlockBaseProps<IBlogListing2Content>> = () =>
72
159
  onClick={handlePrevious}
73
160
  />
74
161
  <Typography elementKey="pagination-text">
75
- {`${query?.page || 0}/${meta?.pages || 0}`}
162
+ {`${query?.page || 0}/${response?.meta?.pages || 0}`}
76
163
  </Typography>
77
164
  <Button
78
165
  elementKey="pagination-right"
79
166
  onClick={handleNext}
80
- disabled={query?.page === meta?.pages}
167
+ disabled={query?.page === response?.meta?.pages}
81
168
  />
82
169
  </Box>
83
170
  )}