@levo-so/blocks 0.1.60 → 0.1.62

package/src/blocks/blogs/blog-listing-3.schema.ts

@@ -37,23 +37,15 @@ const DEFAULT_CONTENT = {
         id: "pKkMlt5KY774",
         filename: "image.png",
         kind: "image",
-        location:
-          "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo.png",
+        location: "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo.png",
         srcset: {
-          "1080w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp",
-          "1200w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp",
-          "1920w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp",
-          "320w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp",
-          "640w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp",
-          "750w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp",
-          "828w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp",
+          "1080w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp",
+          "1200w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp",
+          "1920w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp",
+          "320w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp",
+          "640w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp",
+          "750w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp",
+          "828w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp",
           path: "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp 640w",
         },
         mimetype: "image/png",
@@ -117,23 +109,15 @@ const DEFAULT_CONTENT = {
         id: "pKkMlt5KY774",
         filename: "image.png",
         kind: "image",
-        location:
-          "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo.png",
+        location: "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo.png",
         srcset: {
-          "1080w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp",
-          "1200w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp",
-          "1920w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp",
-          "320w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp",
-          "640w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp",
-          "750w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp",
-          "828w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp",
+          "1080w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp",
+          "1200w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp",
+          "1920w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp",
+          "320w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp",
+          "640w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp",
+          "750w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp",
+          "828w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp",
           path: "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp 640w",
         },
         mimetype: "image/png",
@@ -197,23 +181,15 @@ const DEFAULT_CONTENT = {
         id: "pKkMlt5KY774",
         filename: "image.png",
         kind: "image",
-        location:
-          "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo.png",
+        location: "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo.png",
         srcset: {
-          "1080w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp",
-          "1200w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp",
-          "1920w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp",
-          "320w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp",
-          "640w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp",
-          "750w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp",
-          "828w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp",
+          "1080w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp",
+          "1200w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp",
+          "1920w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp",
+          "320w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp",
+          "640w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp",
+          "750w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp",
+          "828w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp",
           path: "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp 640w",
         },
         mimetype: "image/png",
@@ -277,23 +253,15 @@ const DEFAULT_CONTENT = {
         id: "pKkMlt5KY774",
         filename: "image.png",
         kind: "image",
-        location:
-          "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo.png",
+        location: "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo.png",
         srcset: {
-          "1080w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp",
-          "1200w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp",
-          "1920w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp",
-          "320w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp",
-          "640w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp",
-          "750w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp",
-          "828w":
-            "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp",
+          "1080w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp",
+          "1200w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp",
+          "1920w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp",
+          "320w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp",
+          "640w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp",
+          "750w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp",
+          "828w": "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp",
           path: "https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-T71RnwY8DsXo-640w.webp 640w",
         },
         mimetype: "image/png",

package/src/blocks/blogs/blog-listing-3.tsx

@@ -1,10 +1,10 @@
 import {
-  type ILevoBlockBaseProps,
   Box,
   Button,
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Media,
   Section,
   Typography,
@@ -14,9 +14,7 @@ import dayjs from "dayjs";
 
 import type { IBlogListing3Content } from "./blog-listing-3.schema";
 
-const BlogListing3: React.FC<
-  ILevoBlockBaseProps<IBlogListing3Content>
-> = ({}) => {
+const BlogListing3: React.FC<ILevoBlockBaseProps<IBlogListing3Content>> = ({}) => {
   const { data, query, setQuery, meta } = useContentEngine("blogs");
 
   const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
@@ -34,11 +32,7 @@ const BlogListing3: React.FC<
         </Box>
         <Box elementKey="blogs_levoGroup" data-levo_group>
           {(data || [])?.map((item: any, index: number) => (
-            <Box
-              key={`blogs.${index}`}
-              data-levo_group_item
-              elementKey={`blogs.${index}.blog`}
-            >
+            <Box key={`blogs.${index}`} data-levo_group_item elementKey={`blogs.${index}.blog`}>
               <Media elementKey={`blogs.${index}.media`} alt="Blog Media" />
               <Box elementKey={`blogs.${index}.blog-info-wrapper`}>
                 <Box elementKey={`blogs.${index}.blog-content`}>
@@ -47,9 +41,7 @@ const BlogListing3: React.FC<
                     <Typography elementKey={`blogs.${index}.blog-type`}>
                       {data?.[index]?.["publish-date"] &&
                       dayjs(data?.[index]?.["publish-date"]).isValid()
-                        ? dayjs(data?.[index]?.["publish-date"]).format(
-                            "DD MMM, YYYY",
-                          )
+                        ? dayjs(data?.[index]?.["publish-date"]).format("DD MMM, YYYY")
                         : " "}
                     </Typography>
                   </Box>

package/src/blocks/blogs/blog-post-1.schema.ts

@@ -7,20 +7,13 @@ const MEDIA = {
     kind: "image",
     mimetype: "image/png",
     srcset: {
-      "1080w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      "1080w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
       path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
     },
   },
@@ -74,8 +67,7 @@ export const BlogPost1: IBlock = {
       label: "Layout",
       field_interface: "LayoutWidget",
       hint: {
-        prompt_description:
-          "Defines the overall page structure and layout. No content needed.",
+        prompt_description: "Defines the overall page structure and layout. No content needed.",
       },
     },
     {
@@ -131,8 +123,7 @@ export const BlogPost1: IBlock = {
       label: "Title Section",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for the main blog post headline. No content needed here.",
+        prompt_description: "Container for the main blog post headline. No content needed here.",
       },
     },
     {

package/src/blocks/blogs/blog-post-1.tsx

@@ -1,21 +1,11 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import {
-  Box,
-  Container,
-  Heading,
-  Icon,
-  Media,
-  Section,
-  Typography,
-} from "@levo-so/studio";
+import { Box, Container, Heading, Icon, Media, Section, Typography } from "@levo-so/studio";
 import dayjs from "dayjs";
 import type React from "react";
 
 import type { IBlogPost1Content } from "./blog-post-1.schema";
 
-const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = ({
-  content,
-}) => (
+const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header-section">
@@ -31,8 +21,7 @@ const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = ({
                 <Heading elementKey="author-name" />
               </Box>
               <Typography elementKey="publish-date">
-                {content?.["publish-date"] &&
-                dayjs(content?.["publish-date"]).isValid()
+                {content?.["publish-date"] && dayjs(content?.["publish-date"]).isValid()
                   ? dayjs(content?.["publish-date"]).format("DD MMM, YYYY")
                   : " "}
               </Typography>

package/src/blocks/calendar/calendar-1.schema.ts

@@ -61,6 +61,8 @@ const DEFAULT_CONTENT = {
               event_starts_date: randomStartDate,
               event_ends_date: randomEndDate,
             }),
+        starts_at: randomStartDate,
+        ends_at: randomEndDate,
       };
     }),
   empty_state: null,
@@ -77,7 +79,7 @@ const DEFAULT_CONTENT = {
   empty_state_title: "No Events",
   empty_state_description:
     "There are no events scheduled for this month. Check back later or select a different month to view upcoming events.",
-  empty_state_cta: "Show All Events",
+  empty_state_cta: "Reset Calendar",
   calendar_section: null,
   calendar_header: null,
   calendar_title: "Events Calendar",
@@ -86,16 +88,50 @@ const DEFAULT_CONTENT = {
   calendar: null,
   calendar_ctas_levoGroup: null,
   calendar_ctas: [
-    { calendar_cta: "View all events" },
-    { calendar_cta: "Search Events" },
+    {
+      calendar_cta: "View all events",
+      calendar_cta_leftIcon: {
+        kind: "icon",
+        data: {
+          id: "export-3",
+          label: "Export 3",
+          tags: ["arrow", "custom", "directional", "export"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M13.0004 11.75C12.8104 11.75 12.6204 11.68 12.4704 11.53C12.1804 11.24 12.1804 10.76 12.4704 10.47L20.6704 2.26999C20.9604 1.97999 21.4404 1.97999 21.7304 2.26999C22.0204 2.55999 22.0204 3.03999 21.7304 3.32999L13.5304 11.53C13.3804 11.68 13.1904 11.75 13.0004 11.75Z" fill="currentColor"/>\n<path d="M22.0002 7.55C21.5902 7.55 21.2502 7.21 21.2502 6.8V2.75H17.2002C16.7902 2.75 16.4502 2.41 16.4502 2C16.4502 1.59 16.7902 1.25 17.2002 1.25H22.0002C22.4102 1.25 22.7502 1.59 22.7502 2V6.8C22.7502 7.21 22.4102 7.55 22.0002 7.55Z" fill="currentColor"/>\n<path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H11C11.41 1.25 11.75 1.59 11.75 2C11.75 2.41 11.41 2.75 11 2.75H9C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V13C21.25 12.59 21.59 12.25 22 12.25C22.41 12.25 22.75 12.59 22.75 13V15C22.75 20.43 20.43 22.75 15 22.75Z" fill="currentColor"/>\n</svg>',
+        },
+      },
+    },
+    {
+      calendar_cta: "Search Events",
+      calendar_cta_leftIcon: {
+        kind: "icon",
+        data: {
+          id: "search-normal-1",
+          label: "Search Normal 1",
+          tags: ["custom", "directional", "normal", "search"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z" fill="currentColor"/>\n<path d="M22.0004 22.7499C21.8104 22.7499 21.6204 22.6799 21.4704 22.5299L19.4704 20.5299C19.1804 20.2399 19.1804 19.7599 19.4704 19.4699C19.7604 19.1799 20.2404 19.1799 20.5304 19.4699L22.5304 21.4699C22.8204 21.7599 22.8204 22.2399 22.5304 22.5299C22.3804 22.6799 22.1904 22.7499 22.0004 22.7499Z" fill="currentColor"/>\n</svg>',
+        },
+      },
+    },
   ],
+  empty_state_cta_leftIcon: {
+    kind: "icon",
+    data: {
+      id: "refresh-2",
+      label: "Refresh 2",
+      tags: ["arrow", "custom", "outlined", "refresh"],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M22 12C22 17.52 17.52 22 12 22C6.48 22 3.11 16.44 3.11 16.44M3.11 16.44H7.63M3.11 16.44V21.44M2 12C2 6.48 6.44 2 12 2C18.67 2 22 7.56 22 7.56M22 7.56V2.56M22 7.56H17.56" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n</svg>',
+    },
+  },
 };
 
 export type ICalendar1Content = typeof DEFAULT_CONTENT;
 
 export const Calendar1: IBlock = {
   category_id: "calendar",
-  title: "Calender 1",
+  title: "Calendar 1",
   key: "calendar-1",
   version: "v1",
   content_schema: [
@@ -155,6 +191,11 @@ export const Calendar1: IBlock = {
           label: "Event Starts Date",
           field_interface: "HeadingWidget",
         },
+        {
+          key: "starts_at",
+          label: "Start Time",
+          field_interface: "TypographyWidget",
+        },
         {
           key: "event_starts_month",
           label: "Event Starts Month",
@@ -175,6 +216,11 @@ export const Calendar1: IBlock = {
           label: "Event Ends Date",
           field_interface: "HeadingWidget",
         },
+        {
+          key: "ends_at",
+          label: "End Time",
+          field_interface: "TypographyWidget",
+        },
         {
           key: "event_ends_month",
           label: "Event Ends Month",
@@ -469,7 +515,11 @@ export const Calendar1: IBlock = {
           "line-height": 1.6,
           "margin-bottom": "24px",
         },
-        empty_state_cta: {},
+        empty_state_cta: {
+          "text-decoration": "none",
+          display: "flex",
+          "column-gap": "xs",
+        },
         calendar_section: {
           width: "100%",
           display: "flex",
@@ -516,7 +566,12 @@ export const Calendar1: IBlock = {
         },
         calendar_ctas: Array(2)
           .fill(0)
-          .map(() => ({ calendar_cta: {} })),
+          .map(() => ({
+            calendar_cta: {
+              display: "flex",
+              "column-gap": "xs",
+            },
+          })),
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -613,6 +668,40 @@ export const Calendar1: IBlock = {
             Typography_Variants: "Body",
           },
         },
+        empty_state_cta: {
+          selectedVariants: {
+            Button_Variants: "Link",
+          },
+          button_icons: {
+            left: {
+              enabled: true,
+            },
+          },
+        },
+        calendar_ctas: [
+          {
+            calendar_cta: {
+              selectedVariants: {},
+              button_icons: {
+                left: {
+                  enabled: true,
+                },
+              },
+            },
+          },
+          {
+            calendar_cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+              button_icons: {
+                left: {
+                  enabled: true,
+                },
+              },
+            },
+          },
+        ],
       },
     },
   ],

package/src/blocks/calendar/calendar-1.tsx

@@ -1,14 +1,14 @@
 import {
-  type ILevoBlockBaseProps,
   Box,
   Button,
+  Calendar,
   Container,
   Heading,
+  Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
   useContentEngine,
-  Calendar,
-  Icon,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
 import { useState } from "react";
@@ -20,10 +20,17 @@ const EventCard: React.FC<{
   index: number;
 }> = ({ event, index }) => {
   const isEndDateValid = !!(
-    dayjs(event?.event_ends_date).isValid() &&
-    dayjs(event?.event_ends_month).isValid()
+    dayjs(event?.event_ends_date).isValid() && dayjs(event?.event_ends_month).isValid()
+  );
+
+  const isStartDateIsSameAsEndDate = dayjs(event?.event_starts_date).isSame(
+    event?.event_ends_date,
+    "day",
   );
 
+  const isStartTimeValid = dayjs(event?.starts_at).isValid();
+  const isEndTimeValid = dayjs(event?.ends_at).isValid();
+
   return (
     <Box elementKey={`listing_section.${index}.event`}>
       <Box elementKey={`listing_section.${index}.event_timing`}>
@@ -31,26 +38,36 @@ const EventCard: React.FC<{
           <Heading elementKey={`listing_section.${index}.event_starts_date`}>
             {dayjs(event?.event_starts_date).format("DD")}
           </Heading>
-          <Typography
-            elementKey={`listing_section.${index}.event_starts_month`}
-          >
+          <Typography elementKey={`listing_section.${index}.event_starts_month`}>
             {dayjs(event?.event_starts_date).format("MMMM")}
           </Typography>
         </Box>
-        {isEndDateValid && (
+        {isEndDateValid && !isStartDateIsSameAsEndDate ? (
           <>
             <Typography elementKey={`listing_section.${index}.event_to`} />
             <Box elementKey={`listing_section.${index}.event_ends`}>
               <Heading elementKey={`listing_section.${index}.event_ends_date`}>
                 {dayjs(event?.event_ends_date).format("DD")}
               </Heading>
-              <Typography
-                elementKey={`listing_section.${index}.event_ends_month`}
-              >
+              <Typography elementKey={`listing_section.${index}.event_ends_month`}>
                 {dayjs(event?.event_ends_month).format("MMMM")}
               </Typography>
             </Box>
           </>
+        ) : (
+          <>
+            {isStartTimeValid && (
+              <Typography elementKey={`listing_section.${index}.starts_at`}>
+                {dayjs(event?.starts_at).format("hh:mm a")}
+              </Typography>
+            )}
+
+            {isEndTimeValid && (
+              <Typography elementKey={`listing_section.${index}.ends_at`}>
+                {dayjs(event?.ends_at).format("hh:mm a")}
+              </Typography>
+            )}
+          </>
         )}
       </Box>
       <Box elementKey={`listing_section.${index}.divider`} />
@@ -58,18 +75,14 @@ const EventCard: React.FC<{
         <Heading elementKey={`listing_section.${index}.event_category`} />
         <Box elementKey={`listing_section.${index}.event_sub_content`}>
           <Heading elementKey={`listing_section.${index}.event_title`} />
-          <Typography
-            elementKey={`listing_section.${index}.event_description`}
-          />
+          <Typography elementKey={`listing_section.${index}.event_description`} />
         </Box>
       </Box>
     </Box>
   );
 };
 
-const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = ({
-  content,
-}) => {
+const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = ({ content }) => {
   const { data, query, setQuery } = useContentEngine("listing_section");
 
   const [calendarMonth, setCalendarMonth] = useState<Date>(new Date());
@@ -121,13 +134,7 @@ const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = ({
           <Box elementKey="listing_section_levoGroup" data-levo_group>
             {data && data.length > 0 ? (
               data?.map((item: any, index: number) => {
-                return (
-                  <EventCard
-                    key={`listing_section.${index}`}
-                    index={index}
-                    event={item}
-                  />
-                );
+                return <EventCard key={`listing_section.${index}`} index={index} event={item} />;
               })
             ) : (
               <Box elementKey="empty_state">
@@ -161,10 +168,7 @@ const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = ({
                   data-levo_group_item
                 />
               ))}
-              <Button
-                elementKey="empty_state_cta"
-                onClick={handleResetFilter}
-              />
+              <Button elementKey="empty_state_cta" onClick={handleResetFilter} />
             </Box>
           </Box>
         </Box>