@levo-so/blocks 0.1.2 → 0.1.52

package/src/blocks/event/event-listing-2.schema.ts

@@ -26,23 +26,24 @@ const DEFAULT_CONTENT = {
         id: "w9fEtJuVtBFgU",
         filename: "image.png",
         kind: "image",
-        location: "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm.png",
+        location:
+          "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm.png",
         srcset: {
           "1080w":
-            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp",
+            "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp",
           "1200w":
-            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp",
+            "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp",
           "1920w":
-            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp",
+            "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp",
           "320w":
-            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp",
+            "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp",
           "640w":
-            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp",
+            "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp",
           "750w":
-            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp",
+            "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp",
           "828w":
-            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp",
-          path: "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp 750w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp 828w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp 1080w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp 1200w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp 1920w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp 320w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp 640w",
+            "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp",
+          path: "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp 640w",
         },
         mimetype: "image/png",
       },
@@ -117,6 +118,10 @@ const DEFAULT_CONTENT = {
       ],
     },
   ],
+  paginationWrapper: null,
+  paginationLeftButton: "Previous",
+  paginationText: "",
+  paginationRightButton: "Next",
 };
 
 export type IEventListing2Content = typeof DEFAULT_CONTENT;
@@ -298,6 +303,59 @@ export const EventListing2: IBlock = {
         max_items: 6,
       },
     },
+    {
+      key: "paginationWrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container holding pagination controls (buttons and info) at the bottom of the event grid. Provides structure and alignment for pagination elements. No content generation required.",
+      },
+    },
+    {
+      key: "paginationLeftButton",
+      label: "Pagination Left Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Button for navigating to the previous page of events. Label should be clear and descriptive, such as 'Previous'.",
+        min_characters: 4,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "paginationInfo",
+      label: "Pagination Info",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays the current events page and total pages, e.g., '1/10'. Keep format concise and clear.",
+        min_characters: 3,
+        max_characters: 8,
+      },
+    },
+    {
+      key: "paginationText",
+      label: "Pagination Text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays the current events page and total pages, e.g., '1/10'. Keep format concise and clear.",
+        min_characters: 3,
+        max_characters: 8,
+      },
+    },
+    {
+      key: "paginationRightButton",
+      label: "Pagination Right Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Button for navigating to the next page of events. Label should be clear and descriptive, such as 'Next'.",
+        min_characters: 4,
+        max_characters: 12,
+      },
+    },
   ],
   layouts: [
     {
@@ -346,12 +404,7 @@ export const EventListing2: IBlock = {
           },
         },
         title: {
-          "font-size": "4xl",
-          "font-weight": "700",
           color: "text-1",
-          mobile: {
-            "font-size": "3xl",
-          },
         },
         description: {
           "font-size": "lg",
@@ -359,17 +412,7 @@ export const EventListing2: IBlock = {
           "max-width": "600px",
           "line-height": "1.6",
         },
-        "cta-button": {
-          "background-color": "background-1",
-          color: "text-1",
-          "padding-top": "base",
-          "padding-bottom": "base",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "border-radius": "lg",
-          "font-weight": "500",
-          "border-color": "border",
-        },
+
         events_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -383,6 +426,13 @@ export const EventListing2: IBlock = {
           },
           filter: "none",
         },
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
         events: Array(2)
           ?.fill(0)
           .map((v) => {
@@ -490,7 +540,16 @@ export const EventListing2: IBlock = {
           }),
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
     },
   ],
 };

package/src/blocks/event/event-listing-2.tsx

@@ -1,70 +1,94 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
-  Section,
+  Box,
+  Button,
   Container,
-  Typography,
   Heading,
-  Box,
   Icon,
   Image,
-  Button,
+  Section,
+  Typography,
+  useContentEngine,
 } from "@levo-so/studio";
 
 import type { IEventListing2Content } from "./event-listing-2.schema";
 
-const EventListing2: React.FC<ILevoBlockBaseProps<IEventListing2Content>> = ({
-  content,
-}) => (
-  <Section elementKey="layout">
-    <Container elementKey="container">
-      <Box elementKey="header-section">
-        <Box elementKey="header-content">
-          <Heading elementKey="title" />
-          <Typography elementKey="description" />
+const EventListing2: React.FC<
+  ILevoBlockBaseProps<IEventListing2Content>
+> = ({}) => {
+  const { data, query, setQuery, meta } = useContentEngine("events");
+
+  const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
+  const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header-section">
+          <Box elementKey="header-content">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+          <Button elementKey="cta-button" />
         </Box>
-        <Button elementKey="cta-button" />
-      </Box>
 
-      <Box elementKey="events_levoGroup" data-levo_group>
-        {(content.events ?? []).map((_: any, index: number) => (
-          <Box
-            key={`event-${index}`}
-            data-levo_group_item
-            elementKey={`events.${index}.eventWrapper`}
-          >
-            <Image elementKey={`events.${index}.image`} alt="Event image" />
+        <Box elementKey="events_levoGroup" data-levo_group>
+          {(data ?? []).map((_: any, index: number) => (
+            <Box
+              key={`event-${index}`}
+              data-levo_group_item
+              elementKey={`events.${index}.eventWrapper`}
+            >
+              <Image elementKey={`events.${index}.image`} alt="Event image" />
 
-            <Box elementKey={`events.${index}.content-wrapper`}>
-              <Heading elementKey={`events.${index}.title`} />
-              <Typography elementKey={`events.${index}.description`} />
+              <Box elementKey={`events.${index}.content-wrapper`}>
+                <Heading elementKey={`events.${index}.title`} />
+                <Typography elementKey={`events.${index}.description`} />
 
-              <Box
-                elementKey={`events.${index}.details_levoGroup`}
-                data-levo_group
-              >
-                {(content.events?.[index]?.details ?? []).map(
-                  (_: any, detailIndex: number) => (
-                    <Box
-                      key={`detail-${detailIndex}`}
-                      data-levo_group_item
-                      elementKey={`events.${index}.details.${detailIndex}.detailWrapper`}
-                    >
-                      <Icon
-                        elementKey={`events.${index}.details.${detailIndex}.icon`}
-                      />
-                      <Typography
-                        elementKey={`events.${index}.details.${detailIndex}.text`}
-                      />
-                    </Box>
-                  ),
-                )}
+                <Box
+                  elementKey={`events.${index}.details_levoGroup`}
+                  data-levo_group
+                >
+                  {(data?.[index]?.details ?? []).map(
+                    (_: any, detailIndex: number) => (
+                      <Box
+                        key={`detail-${detailIndex}`}
+                        data-levo_group_item
+                        elementKey={`events.${index}.details.${detailIndex}.detailWrapper`}
+                      >
+                        <Icon
+                          elementKey={`events.${index}.details.${detailIndex}.icon`}
+                        />
+                        <Typography
+                          elementKey={`events.${index}.details.${detailIndex}.text`}
+                        />
+                      </Box>
+                    ),
+                  )}
+                </Box>
               </Box>
             </Box>
-          </Box>
-        ))}
-      </Box>
-    </Container>
-  </Section>
-);
+          ))}
+        </Box>
+        <Box elementKey="paginationWrapper">
+          <Button
+            elementKey="paginationLeftButton"
+            disabled={query?.page === 1}
+            onClick={handlePrevious}
+          />
+
+          <Typography elementKey="paginationText">
+            {`${query?.page || 0}/${meta?.pages || 0}`}
+          </Typography>
+          <Button
+            elementKey="paginationRightButton"
+            onClick={handleNext}
+            disabled={query?.page === meta?.pages}
+          />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
 
 export default EventListing2;

package/src/blocks/event/event-listing-3.schema.ts

@@ -34,20 +34,6 @@ const DUMMY_ICON = {
   },
 };
 
-const ARROW_LEFT_IMAGE = {
-  id: "9GFRzqRPswl8h",
-  kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/arrow-left-PzNnrMeYWUyNg.svg",
-  srcset: {},
-};
-
-const ARROW_RIGHT_IMAGE = {
-  id: "9GFRzqRPswl8h",
-  kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/arrow-right-tryvMJ0Z2DosG.svg",
-  srcset: {},
-};
-
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -114,11 +100,9 @@ const DEFAULT_CONTENT = {
     },
   ],
   paginationWrapper: null,
-  paginationLeftButton: "",
-  paginationLeftIcon: ARROW_LEFT_IMAGE,
+  paginationLeftButton: "Previous",
   paginationText: "",
-  paginationRightButton: "",
-  paginationRightIcon: ARROW_RIGHT_IMAGE,
+  paginationRightButton: "Next",
 };
 
 export type IEventListing3 = typeof DEFAULT_CONTENT;
@@ -328,31 +312,54 @@ export const EventListing3: IBlock = {
       key: "paginationWrapper",
       label: "Pagination Wrapper",
       field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container holding pagination controls (buttons and info) at the bottom of the event grid. Provides structure and alignment for pagination elements. No content generation required.",
+      },
     },
     {
       key: "paginationLeftButton",
-      label: "Previous Button",
+      label: "Pagination Left Button",
       field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Button for navigating to the previous page of events. Label should be clear and descriptive, such as 'Previous'.",
+        min_characters: 4,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "paginationInfo",
+      label: "Pagination Info",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays the current events page and total pages, e.g., '1/10'. Keep format concise and clear.",
+        min_characters: 3,
+        max_characters: 8,
+      },
     },
     {
       key: "paginationText",
       label: "Pagination Text",
       field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays the current events page and total pages, e.g., '1/10'. Keep format concise and clear.",
+        min_characters: 3,
+        max_characters: 8,
+      },
     },
     {
       key: "paginationRightButton",
-      label: "Next Button",
+      label: "Pagination Right Button",
       field_interface: "ButtonWidget",
-    },
-    {
-      key: "paginationLeftIcon",
-      label: "Previous Icon",
-      field_interface: "ImageWidget",
-    },
-    {
-      key: "paginationRightIcon",
-      label: "Next Icon",
-      field_interface: "ImageWidget",
+      hint: {
+        prompt_description:
+          "Button for navigating to the next page of events. Label should be clear and descriptive, such as 'Next'.",
+        min_characters: 4,
+        max_characters: 12,
+      },
     },
   ],
   layouts: [
@@ -399,19 +406,13 @@ export const EventListing3: IBlock = {
           },
         },
         title: {
-          "font-size": "5xl",
-          "font-weight": 600,
-          color: "var(--color-text-1)",
+          color: "text-1",
           margin: "0",
-          mobile: {
-            "font-size": "3xl",
-          },
         },
         "cta-button": {
           "background-color": "transparent",
-          color: "var(--color-brand)",
-          "font-size": "lg",
-          "font-weight": 500,
+          color: "color-brand",
+
           "text-decoration": "none",
           border: "none",
           cursor: "pointer",
@@ -437,6 +438,7 @@ export const EventListing3: IBlock = {
           },
           filter: "none",
         },
+
         events: Array(3)
           .fill(0)
           ?.map((v) => {
@@ -576,8 +578,7 @@ export const EventListing3: IBlock = {
           cursor: "pointer",
         },
         paginationText: {
-          "font-size": "base",
-          color: "var(--color-text-1)",
+          color: "text-1",
         },
         paginationRightButton: {
           "background-color": "transparent",
@@ -599,7 +600,22 @@ export const EventListing3: IBlock = {
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+
+        "cta-button": {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+        },
+      },
     },
   ],
 };

package/src/blocks/event/event-listing-3.tsx

@@ -71,21 +71,16 @@ const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
             elementKey="paginationLeftButton"
             disabled={query?.page === 1}
             onClick={handlePrevious}
-          >
-            <Icon elementKey="paginationLeftIcon" />
-          </Button>
+          />
+
           <Typography elementKey="paginationText">
-            {query?.page}
-            {"/"}
-            {meta?.pages}
+            {`${query?.page || 0}/${meta?.pages || 0}`}
           </Typography>
           <Button
             elementKey="paginationRightButton"
             onClick={handleNext}
             disabled={query?.page === meta?.pages}
-          >
-            <Icon elementKey="paginationRightIcon" />
-          </Button>
+          />
         </Box>
       </Container>
     </Section>