@levo-so/blocks 0.1.2 → 0.1.52

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

@@ -0,0 +1,84 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Media,
+  Section,
+  Typography,
+  useContentEngine,
+} from "@levo-so/studio";
+import dayjs from "dayjs";
+
+import type { IBlogListing3Content } from "./blog-listing-3.schema";
+
+const BlogListing3: React.FC<
+  ILevoBlockBaseProps<IBlogListing3Content>
+> = ({}) => {
+  const { data, query, setQuery, meta } = useContentEngine("blogs");
+
+  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-wrapper">
+          <Box elementKey="title-wrapper">
+            <Icon elementKey="header-icon" />
+            <Heading elementKey="header" />
+          </Box>
+          <Button elementKey="header-cta" />
+        </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`}
+            >
+              <Media elementKey={`blogs.${index}.media`} alt="Blog Media" />
+              <Box elementKey={`blogs.${index}.blog-info-wrapper`}>
+                <Box elementKey={`blogs.${index}.blog-content`}>
+                  <Box elementKey={`blogs.${index}.blog-header`}>
+                    <Icon elementKey={`blogs.${index}.header-icon`} />
+                    <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",
+                          )
+                        : " "}
+                    </Typography>
+                  </Box>
+                  <Heading elementKey={`blogs.${index}.title`} />
+                  <Typography elementKey={`blogs.${index}.description`} />
+                </Box>
+                <Button elementKey={`blogs.${index}.cta`} />
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Box elementKey="pagination-wrapper">
+          <Button
+            elementKey="pagination-left"
+            disabled={query?.page === 1}
+            onClick={handlePrevious}
+          />
+          <Typography elementKey="pagination-text">
+            {`${query?.page || 0}/${meta?.pages || 0}`}
+          </Typography>
+          <Button
+            elementKey="pagination-right"
+            onClick={handleNext}
+            disabled={query?.page === meta?.pages}
+          />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default BlogListing3;

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

@@ -288,7 +288,7 @@ export const BlogPost1: IBlock = {
         },
         "tag-container": {
           width: "fit-content",
-          "border-radius": "lg",
+          "border-radius": "base",
           border: "1px solid",
           "border-color": "var(--color-border)",
           "background-color": "#E9E9EB",
@@ -309,11 +309,7 @@ export const BlogPost1: IBlock = {
         },
         title: {
           "text-align": "center",
-          "font-size": "5xl",
-          "font-weight": "bold",
-          mobile: {
-            "font-size": "3xl",
-          },
+          color: "text-1",
         },
         "meta-info": {
           display: "flex",
@@ -338,8 +334,6 @@ export const BlogPost1: IBlock = {
           "border-radius": "100%",
         },
         "author-name": {
-          "font-size": "sm",
-          "font-weight": "normal",
           color: "var(--color-text-2)",
         },
         "publish-date": {
@@ -386,7 +380,21 @@ export const BlogPost1: IBlock = {
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        "author-name": {
+          selectedVariants: {
+            Heading_Level: "H6",
+          },
+        },
+      },
     },
   ],
 };

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

@@ -506,14 +506,12 @@ export const BlogPost2: IBlock = {
               "border-radius": "lg",
               border: "1px solid",
               "border-color": "var(--color-border)",
-              "background-color": "var(--color-background-1)",
+
               display: "flex",
               "flex-direction": "column",
               "row-gap": "base",
             },
             heading: {
-              "font-size": "xl",
-              "font-weight": "bold",
               color: "var(--color-text-1)",
               "margin-bottom": "base",
             },
@@ -528,8 +526,6 @@ export const BlogPost2: IBlock = {
                   "margin-bottom": "sm",
                 },
                 title: {
-                  "font-size": "lg",
-                  "font-weight": "semibold",
                   "margin-bottom": "xs",
                   color: "var(--color-text-1)",
                 },
@@ -544,8 +540,6 @@ export const BlogPost2: IBlock = {
                   "margin-bottom": "sm",
                 },
                 title: {
-                  "font-size": "lg",
-                  "font-weight": "semibold",
                   "margin-bottom": "xs",
                   color: "var(--color-text-1)",
                 },
@@ -556,20 +550,6 @@ export const BlogPost2: IBlock = {
                 },
               },
             ],
-            button: {
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "background-color": "var(--color-background-1)",
-              "border-radius": "base",
-              border: "1px solid",
-              "border-color": "var(--color-border)",
-              "font-size": "sm",
-              "font-weight": "medium",
-              color: "var(--color-text-1)",
-              "margin-top": "auto",
-            },
           },
           {
             card: {
@@ -580,7 +560,7 @@ export const BlogPost2: IBlock = {
               "border-radius": "lg",
               border: "1px solid",
               "border-color": "var(--color-border)",
-              "background-color": "var(--color-background-1)",
+
               display: "flex",
               "flex-direction": "column",
               "row-gap": "base",
@@ -601,8 +581,6 @@ export const BlogPost2: IBlock = {
                   "margin-bottom": "sm",
                 },
                 title: {
-                  "font-size": "lg",
-                  "font-weight": "semibold",
                   "margin-bottom": "xs",
                   color: "var(--color-text-1)",
                 },
@@ -613,20 +591,6 @@ export const BlogPost2: IBlock = {
                 },
               },
             ],
-            button: {
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "background-color": "var(--color-background-1)",
-              "border-radius": "base",
-              border: "1px solid",
-              "border-color": "var(--color-border)",
-              "font-size": "sm",
-              "font-weight": "medium",
-              color: "var(--color-text-1)",
-              "margin-top": "auto",
-            },
           },
           {
             card: {
@@ -637,7 +601,7 @@ export const BlogPost2: IBlock = {
               "border-radius": "lg",
               border: "1px solid",
               "border-color": "var(--color-border)",
-              "background-color": "var(--color-background-1)",
+
               display: "flex",
               "flex-direction": "column",
               "row-gap": "base",
@@ -658,8 +622,6 @@ export const BlogPost2: IBlock = {
                   "margin-bottom": "sm",
                 },
                 title: {
-                  "font-size": "lg",
-                  "font-weight": "semibold",
                   "margin-bottom": "xs",
                   color: "var(--color-text-1)",
                 },
@@ -670,20 +632,6 @@ export const BlogPost2: IBlock = {
                 },
               },
             ],
-            button: {
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "background-color": "var(--color-background-1)",
-              "border-radius": "base",
-              border: "1px solid",
-              "border-color": "var(--color-border)",
-              "font-size": "sm",
-              "font-weight": "medium",
-              color: "var(--color-text-1)",
-              "margin-top": "auto",
-            },
           },
         ],
 
@@ -828,7 +776,16 @@ export const BlogPost2: IBlock = {
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
     },
   ],
 };

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

@@ -0,0 +1,284 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  main_container: null,
+  left_container: null,
+  image: null,
+  social_icons: null,
+  social_icon_1: null,
+  social_icon_2: null,
+  social_icon_3: null,
+  ctas: [],
+  right_container: null,
+  experience_container: null,
+  experience_title: "15 Years of Experience",
+  experience_description:
+    "Leading digital transformation initiatives for Fortune 500 companies worldwide",
+  expertise_title: "Technical Expertise",
+  expertise_description:
+    "Specializing in cloud architecture, AI integration, and scalable web solutions",
+  content_container: null,
+  content_description:
+    "Our team of expert developers and designers work collaboratively to deliver innovative solutions that drive business growth. We combine cutting-edge technology with industry best practices to create digital experiences that engage and inspire users.",
+};
+
+export type IBlogPost3Content = typeof DEFAULT_CONTENT;
+
+export const BlogPost3: IBlock = {
+  category_id: "blogs",
+  title: "Blog Post 3",
+  key: "blog-post-3",
+  version: "v1",
+  prompt_description:
+    "A blog post layout with left-right container featuring image, social icons, and experience content",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "main_container",
+      label: "Main Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "left_container",
+      label: "Left Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "image",
+      label: "Image",
+      field_interface: "ImageWidget",
+    },
+    {
+      key: "social_icons",
+      label: "Social Icons Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "social_icon_1",
+      label: "Social Icon 1",
+      field_interface: "IconWidget",
+    },
+    {
+      key: "social_icon_2",
+      label: "Social Icon 2",
+      field_interface: "IconWidget",
+    },
+    {
+      key: "social_icon_3",
+      label: "Social Icon 3",
+      field_interface: "IconWidget",
+    },
+    {
+      key: "ctas",
+      label: "Call to Action",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+    {
+      key: "right_container",
+      label: "Right Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "main_text_container",
+      label: "Main Text Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "name",
+      label: "Name",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "experience_wrapper",
+      label: "Experience Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "expertise_wrapper",
+      label: "Expertise Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "experience_title",
+      label: "Experience Title",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "experience_description",
+      label: "Experience Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "expertise_title",
+      label: "Expertise Title",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "expertise_description",
+      label: "Expertise Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "content_container",
+      label: "Content Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "content_description",
+      label: "Content Description",
+      field_interface: "TypographyWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "48px",
+          "padding-bottom": "48px",
+          "padding-left": "48px",
+          "padding-right": "48px",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        main_container: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "flex-start",
+          "column-gap": "48px",
+          tablet: {
+            "flex-direction": "column",
+          },
+        },
+        left_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          flex: "1",
+          "max-width": "400px",
+          tablet: {
+            "max-width": "100%",
+          },
+        },
+        image: {
+          "border-radius": "12px",
+          "margin-bottom": "24px",
+          width: "100%",
+          height: "300px",
+          "object-fit": "cover",
+        },
+        social_icons: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "16px",
+          "align-items": "center",
+          "justify-content": "center",
+        },
+        social_icon_1: {
+          "background-color": "background-1",
+          color: "text-1",
+          "padding-top": "12px",
+          "padding-bottom": "12px",
+          "padding-left": "12px",
+          "padding-right": "12px",
+          "border-radius": "50%",
+          "border-color": "border",
+          "border-width": "2px",
+        },
+        social_icon_2: {
+          "background-color": "background-1",
+          color: "text-1",
+          "padding-top": "12px",
+          "padding-bottom": "12px",
+          "padding-left": "12px",
+          "padding-right": "12px",
+          "border-radius": "50%",
+          "border-color": "border",
+          "border-width": "2px",
+        },
+        social_icon_3: {
+          "background-color": "background-1",
+          color: "text-1",
+          "padding-top": "12px",
+          "padding-bottom": "12px",
+          "padding-left": "12px",
+          "padding-right": "12px",
+          "border-radius": "50%",
+          "border-color": "border",
+          "border-width": "2px",
+        },
+        right_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "flex-start",
+          flex: "2",
+          "row-gap": "32px",
+        },
+        experience_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "flex-start",
+          "row-gap": "16px",
+        },
+        experience_title: {
+          "font-size": "24px",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "8px",
+        },
+        experience_description: {
+          "font-size": "16px",
+          color: "text-2",
+          "line-height": "1.6",
+          "margin-bottom": "16px",
+        },
+        expertise_title: {
+          "font-size": "20px",
+          "font-weight": "600",
+          color: "text-1",
+          "margin-bottom": "8px",
+        },
+        expertise_description: {
+          "font-size": "16px",
+          color: "text-2",
+          "line-height": "1.6",
+        },
+        content_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "flex-start",
+        },
+        content_description: {
+          "font-size": "16px",
+          color: "text-2",
+          "line-height": "1.6",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,58 @@
+import {
+  Box,
+  Button,
+  Container,
+  Icon,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IBlogPost3Content } from "./blog-post-3.schema";
+
+const BlogPost3: React.FC<ILevoBlockBaseProps<IBlogPost3Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="main_container">
+        <Box elementKey="left_container">
+          <Image elementKey="image" alt="Blog post image" />
+          <Box elementKey="social_icons">
+            <Icon elementKey="social_icon_1" />
+            <Icon elementKey="social_icon_2" />
+            <Icon elementKey="social_icon_3" />
+          </Box>
+          <Box elementKey="ctas_levoGroup" data-levo_group>
+            {(content?.ctas || [])?.map((_, index) => (
+              <Button
+                elementKey={`ctas.${index}.button`}
+                key={`blog-post-3-cta-${index}`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
+        </Box>
+        <Box elementKey="right_container">
+          <Typography elementKey="name" />
+          <Box elementKey="main_text_container">
+            <Box elementKey="experience_wrapper">
+              <Typography elementKey="experience_title" />
+              <Typography elementKey="experience_description" />
+            </Box>
+            <Box elementKey="expertise_wrapper">
+              <Typography elementKey="expertise_title" />
+              <Typography elementKey="expertise_description" />
+            </Box>
+          </Box>
+          <Box elementKey="content_container">
+            <Typography elementKey="content_description" />
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default BlogPost3;