@levo-so/blocks 0.1.2 → 0.1.52

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

@@ -0,0 +1,97 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+  useContentEngine,
+} from "@levo-so/studio";
+import dayjs from "dayjs";
+
+import type { IEventListing4 } from "./event-listing-4.schema";
+
+const EventListing4: React.FC<ILevoBlockBaseProps<IEventListing4>> = () => {
+  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-container">
+          <Heading elementKey="title" />
+          <Button elementKey="cta-button" />
+        </Box>
+
+        <Box elementKey="events_levoGroup" data-levo_group>
+          {(data || [])?.map((item: any, index: number) => (
+            <Box
+              key={`events-listing-element-${index}`}
+              data-levo_group_item
+              elementKey={`events.${index}.eventWrapper`}
+            >
+              <Image elementKey={`events.${index}.image`} alt="event poster" />
+              <Box elementKey={`events.${index}.text-wrapper`}>
+                <Box elementKey={`events.${index}.content-container`}>
+                  <Typography elementKey={`events.${index}.caption-text`} />
+                  <Typography elementKey={`events.${index}.title`} />
+
+                  <Box elementKey={`events.${index}.text-container`}>
+                    <Box elementKey={`events.${index}.date-wrapper`}>
+                      <Icon elementKey={`events.${index}.date-icon`} />
+                      <Typography
+                        elementKey={`events.${index}.publishedAt-header`}
+                      >
+                        {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                      </Typography>
+                      <Typography elementKey={`events.${index}.role-text`} />
+                    </Box>
+
+                    <Box elementKey={`events.${index}.event-end-date-wrapper`}>
+                      <Icon
+                        elementKey={`events.${index}.event-end-date-icon`}
+                      />
+                      <Typography elementKey={`events.${index}.event-end-date`}>
+                        {dayjs(item?.ends_at).format("MMM D, YYYY")}
+                      </Typography>
+                      <Typography elementKey={`events.${index}.company-text`} />
+                    </Box>
+                  </Box>
+                  <Typography elementKey={`events.${index}.description`} />
+                  <Box elementKey={`events.${index}.social_media_icon_wrapper`}>
+                    <Icon elementKey={`events.${index}.social_media_icon_1`} />
+                    <Icon elementKey={`events.${index}.social_media_icon_2`} />
+                    <Icon elementKey={`events.${index}.social_media_icon_3`} />
+                  </Box>
+                  <Button elementKey={`events.${index}.cta`} />
+                </Box>
+              </Box>
+            </Box>
+          ))}
+        </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 EventListing4;

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

@@ -466,8 +466,7 @@ export const EventListing: IBlock = {
         },
         title: {
           "padding-left": "none",
-          "font-size": "5xl",
-          "font-weight": 600,
+          color: "text-1",
         },
         container: {
           display: "flex",
@@ -492,10 +491,9 @@ export const EventListing: IBlock = {
         events: [
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
             },
             image: {
               width: "100%",
@@ -513,12 +511,14 @@ export const EventListing: IBlock = {
               "font-weight": 400,
               "font-size": "xl",
               filter: "none",
+              color: "text-1",
             },
             description: {
               overflow: "hidden",
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
+              color: "text-2",
             },
             publishedAt: {
               "font-size": "sm",
@@ -562,12 +562,14 @@ export const EventListing: IBlock = {
               "font-weight": 400,
               "font-size": "xl",
               filter: "none",
+              color: "text-1",
             },
             description: {
               overflow: "hidden",
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
+              color: "text-2",
             },
             publishedAt: {
               "font-size": "sm",
@@ -589,10 +591,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
               filter: "none",
             },
             image: {
@@ -616,9 +617,10 @@ export const EventListing: IBlock = {
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
+              color: "text-2",
             },
             publishedAt: {
-              "font-size": "sm",
+              color: "text-2",
             },
             "text-container": {
               filter: "none",
@@ -637,10 +639,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
             },
             image: {
               width: "100%",
@@ -663,6 +664,7 @@ export const EventListing: IBlock = {
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
+              color: "text-2",
             },
             publishedAt: {
               "font-size": "sm",
@@ -684,10 +686,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
             },
             image: {
               width: "100%",
@@ -710,6 +711,7 @@ export const EventListing: IBlock = {
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
+              color: "text-2",
             },
             publishedAt: {
               "font-size": "sm",
@@ -731,10 +733,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
             },
             image: {
               width: "100%",
@@ -757,6 +758,7 @@ export const EventListing: IBlock = {
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
+              color: "text-2",
             },
             publishedAt: {
               "font-size": "sm",
@@ -789,7 +791,16 @@ export const EventListing: IBlock = {
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
     },
     {
       key: "cta-variant",
@@ -827,30 +838,10 @@ export const EventListing: IBlock = {
           },
         },
         title: {
-          "font-size": "5xl",
-          "font-weight": 700,
-          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,
-          "text-decoration": "none",
-          border: "none",
-          cursor: "pointer",
-          display: "flex",
-          "align-items": "center",
-          "column-gap": "xs",
-          "&:hover": {
-            "text-decoration": "underline",
-          },
-          filter: "none",
         },
+
         container: {
           display: "flex",
           "flex-direction": "column",
@@ -875,10 +866,9 @@ export const EventListing: IBlock = {
         events: [
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
               position: "relative",
               filter: "none",
               "padding-bottom": "base",
@@ -888,6 +878,7 @@ export const EventListing: IBlock = {
               height: "200px",
               "object-fit": "cover",
               filter: "none",
+              "border-radius": "base",
             },
             "text-wrapper": {
               "padding-left": "xl",
@@ -911,7 +902,7 @@ export const EventListing: IBlock = {
               color: "white",
               "font-size": "xs",
               "line-height": "normal",
-              "background-color": "var(--color-brand)",
+              "background-color": "brand",
               "font-weight": 500,
               "padding-left": "sm",
               "padding-right": "sm",
@@ -935,7 +926,7 @@ export const EventListing: IBlock = {
             },
             "publishedAt-header": {
               "font-size": "sm",
-              color: "var(--color-text-2)",
+              color: "text-2",
               "font-weight": 500,
               filter: "none",
             },
@@ -943,7 +934,7 @@ export const EventListing: IBlock = {
               "font-weight": 600,
               "font-size": "xl",
               "margin-bottom": "xs",
-              color: "var(--color-text-1)",
+              color: "text-1",
               filter: "none",
             },
             description: {
@@ -951,7 +942,7 @@ export const EventListing: IBlock = {
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
-              color: "var(--color-text-2)",
+              color: "text-2",
               "line-height": 1.5,
             },
             publishedAt: {
@@ -961,10 +952,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
               position: "relative",
               filter: "none",
             },
@@ -996,7 +986,7 @@ export const EventListing: IBlock = {
               color: "white",
               "font-size": "xs",
               "line-height": "normal",
-              "background-color": "var(--color-brand)",
+              "background-color": "brand",
               "font-weight": 500,
               "padding-left": "sm",
               "padding-right": "sm",
@@ -1016,21 +1006,21 @@ export const EventListing: IBlock = {
             },
             "publishedAt-header": {
               "font-size": "sm",
-              color: "var(--color-text-2)",
+              color: "text-2",
               "font-weight": 500,
             },
             title: {
               "font-weight": 600,
               "font-size": "xl",
               "margin-bottom": "xs",
-              color: "var(--color-text-1)",
+              color: "text-1",
             },
             description: {
               overflow: "hidden",
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
-              color: "var(--color-text-2)",
+              color: "text-2",
               "line-height": 1.5,
             },
             publishedAt: {
@@ -1039,10 +1029,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
               position: "relative",
               filter: "none",
             },
@@ -1073,7 +1062,7 @@ export const EventListing: IBlock = {
               color: "white",
               "font-size": "xs",
               "line-height": "normal",
-              "background-color": "var(--color-brand)",
+              "background-color": "brand",
               "font-weight": 500,
               "padding-left": "sm",
               "padding-right": "sm",
@@ -1093,21 +1082,21 @@ export const EventListing: IBlock = {
             },
             "publishedAt-header": {
               "font-size": "sm",
-              color: "var(--color-text-2)",
+              color: "text-2",
               "font-weight": 500,
             },
             title: {
               "font-weight": 600,
               "font-size": "xl",
               "margin-bottom": "xs",
-              color: "var(--color-text-1)",
+              color: "text-1",
             },
             description: {
               overflow: "hidden",
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
-              color: "var(--color-text-2)",
+              color: "text-2",
               "line-height": 1.5,
             },
             publishedAt: {
@@ -1116,10 +1105,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
               position: "relative",
             },
             image: {
@@ -1128,9 +1116,9 @@ export const EventListing: IBlock = {
               "object-fit": "cover",
             },
             "text-wrapper": {
-              "padding-left": "xl",
+              "padding-left": "base",
               "padding-top": "2xl",
-              "padding-right": "xl",
+              "padding-right": "base",
               "padding-bottom": "base",
               display: "flex",
               "flex-direction": "column",
@@ -1149,7 +1137,7 @@ export const EventListing: IBlock = {
               color: "white",
               "font-size": "xs",
               "line-height": "normal",
-              "background-color": "var(--color-brand)",
+              "background-color": "brand",
               "font-weight": 500,
               "padding-left": "sm",
               "padding-right": "sm",
@@ -1169,21 +1157,21 @@ export const EventListing: IBlock = {
             },
             "publishedAt-header": {
               "font-size": "sm",
-              color: "var(--color-text-2)",
+              color: "text-2",
               "font-weight": 500,
             },
             title: {
               "font-weight": 600,
               "font-size": "xl",
               "margin-bottom": "xs",
-              color: "var(--color-text-1)",
+              color: "text-1",
             },
             description: {
               overflow: "hidden",
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
-              color: "var(--color-text-2)",
+              color: "text-2",
               "line-height": 1.5,
             },
             publishedAt: {
@@ -1192,10 +1180,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
               position: "relative",
             },
             image: {
@@ -1225,7 +1212,7 @@ export const EventListing: IBlock = {
               color: "white",
               "font-size": "xs",
               "line-height": "normal",
-              "background-color": "var(--color-brand)",
+              "background-color": "brand",
               "font-weight": 500,
               "padding-left": "sm",
               "padding-right": "sm",
@@ -1245,21 +1232,21 @@ export const EventListing: IBlock = {
             },
             "publishedAt-header": {
               "font-size": "sm",
-              color: "var(--color-text-2)",
+              color: "text-2",
               "font-weight": 500,
             },
             title: {
               "font-weight": 600,
               "font-size": "xl",
               "margin-bottom": "xs",
-              color: "var(--color-text-1)",
+              color: "text-1",
             },
             description: {
               overflow: "hidden",
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
-              color: "var(--color-text-2)",
+              color: "text-2",
               "line-height": 1.5,
             },
             publishedAt: {
@@ -1268,10 +1255,9 @@ export const EventListing: IBlock = {
           },
           {
             eventWrapper: {
-              "border-radius": "xl",
+              "border-radius": "base",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              "box-shadow": "default",
               position: "relative",
             },
             image: {
@@ -1301,7 +1287,7 @@ export const EventListing: IBlock = {
               color: "white",
               "font-size": "xs",
               "line-height": "normal",
-              "background-color": "var(--color-brand)",
+              "background-color": "brand",
               "font-weight": 500,
               "padding-left": "sm",
               "padding-right": "sm",
@@ -1321,21 +1307,21 @@ export const EventListing: IBlock = {
             },
             "publishedAt-header": {
               "font-size": "sm",
-              color: "var(--color-text-2)",
+              color: "text-2",
               "font-weight": 500,
             },
             title: {
               "font-weight": 600,
               "font-size": "xl",
               "margin-bottom": "xs",
-              color: "var(--color-text-1)",
+              color: "text-1",
             },
             description: {
               overflow: "hidden",
               display: "-webkit-box",
               "-webkit-box-orient": "vertical",
               "-webkit-line-clamp": 3,
-              color: "var(--color-text-2)",
+              color: "text-2",
               "line-height": 1.5,
             },
             publishedAt: {
@@ -1352,7 +1338,16 @@ export const EventListing: IBlock = {
         },
       },
       content: DEFAULT_CONTENT_CTA,
-      config: {},
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
     },
   ],
 };

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

@@ -72,9 +72,7 @@ const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
           />
 
           <Typography elementKey="paginationText">
-            {query?.page}
-            {"/"}
-            {meta?.pages}
+            {`${query?.page || 0}/${meta?.pages || 0}`}
           </Typography>
           <Button
             elementKey="paginationRightButton"

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

@@ -287,6 +287,7 @@ export const Faq1: IBlock = {
         faq_image: {
           height: "479px",
           width: "356px",
+          "border-radius": "base",
           tablet: {
             width: "300px",
             height: "403px",
@@ -296,17 +297,10 @@ export const Faq1: IBlock = {
           },
         },
         faq_label: {
-          "font-size": "lg",
-          "font-weight": 600,
-          tablet: {
-            "font-size": "base",
-          },
+          color: "text-2",
         },
         title: {
-          "font-size": "4xl",
-          tablet: {
-            "font-size": "2xl",
-          },
+          color: "text-1",
         },
         cta: {
           width: "fit-content",
@@ -351,7 +345,16 @@ export const Faq1: IBlock = {
           }),
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
     },
   ],
 };