@levo-so/blocks 0.1.58 → 0.1.60

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

@@ -21,48 +21,58 @@ const Content1: React.FC<ILevoBlockBaseProps<IContent1Content>> = ({
         <Heading elementKey="title" />
         <Typography elementKey="description" />
       </Box>
-    </Container>
-
-    <Box data-levo_group elementKey="sections_levoGroup">
-      {(content?.sections ?? []).map((_card: unknown, index: number) => (
-        <Box
-          data-levo_group_item
-          key={index}
-          elementKey={`sections.${index}.section`}
-          className="py-16"
-        >
-          <Container elementKey={`sections.${index}.container`}>
-            <Box elementKey={`sections.${index}.content_wrapper`}>
-              <Box elementKey={`sections.${index}.section_content`}>
-                <Typography elementKey={`sections.${index}.tag`} />
+      <Box data-levo_group elementKey="sections_levoGroup">
+        {(content?.sections ?? []).map((_card: unknown, index: number) => (
+          <Box
+            data-levo_group_item
+            key={index}
+            elementKey={`sections.${index}.section`}
+            className="py-16"
+          >
+            <Container elementKey={`sections.${index}.container`}>
+              <Box elementKey={`sections.${index}.content_wrapper`}>
+                <Box elementKey={`sections.${index}.section_content`}>
+                  <Typography elementKey={`sections.${index}.tag`} />
 
-                <Box elementKey={`sections.${index}.text_content`}>
-                  <Heading elementKey={`sections.${index}.title`} />
-                  <Typography elementKey={`sections.${index}.description`} />
+                  <Box elementKey={`sections.${index}.text_content`}>
+                    <Heading elementKey={`sections.${index}.title`} />
+                    <Typography elementKey={`sections.${index}.description`} />
+                  </Box>
+                  <Box
+                    elementKey={`sections.${index}.buttons_levoGroup`}
+                    data-levo_group
+                  >
+                    {content?.sections?.[index]?.buttons?.map(
+                      (_: unknown, buttonIndex: number) => (
+                        <Button
+                          key={buttonIndex}
+                          elementKey={`sections.${index}.buttons.${buttonIndex}.button`}
+                        />
+                      ),
+                    )}
+                  </Box>
                 </Box>
-
-                <Button elementKey={`sections.${index}.button`} />
               </Box>
-            </Box>
 
-            <Box elementKey={`sections.${index}.image_wrapper`}>
-              <Image
-                elementKey={`sections.${index}.image_desktop`}
-                width={800}
-                height={600}
-                alt="image"
-              />
-              <Image
-                elementKey={`sections.${index}.image_mobile`}
-                alt="image"
-                width={400}
-                height={300}
-              />
-            </Box>
-          </Container>
-        </Box>
-      ))}
-    </Box>
+              <Box elementKey={`sections.${index}.image_wrapper`}>
+                <Image
+                  elementKey={`sections.${index}.image_desktop`}
+                  width={800}
+                  height={600}
+                  alt="image"
+                />
+                <Image
+                  elementKey={`sections.${index}.image_mobile`}
+                  alt="image"
+                  width={400}
+                  height={300}
+                />
+              </Box>
+            </Container>
+          </Box>
+        ))}
+      </Box>
+    </Container>
   </Section>
 );
 

package/src/blocks/content/content-2.schema.ts

@@ -1,23 +1,100 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA_1 = {
+  id: "gVHcJuqAxXyH",
+  filename: "content-2-1.png",
   kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/content-2-1-QsAH4gZcewLZ-1200w.webp 1200w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_2 = {
+  id: "4JOdlk23K9wT",
+  filename: "content-2-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/content-2-2-w9fFJutGfOyH-750w.webp 750w",
+  },
   mimetype: "image/png",
+};
+const MEDIA_3 = {
+  id: "n3q5fSsvf350",
+  filename: "content-2-3.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8.png",
   srcset: {
     "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-1080w.webp",
     "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-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",
+      "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/content-2-3-T71VnwU175V8-828w.webp 828w",
   },
+  mimetype: "image/png",
+};
+const MEDIA_4 = {
+  id: "Imv4Br3U0NvB",
+  filename: "content-2-4.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/content-2-4-LkpaHvjGtx8j-828w.webp 828w",
+  },
+  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -25,13 +102,23 @@ const DEFAULT_CONTENT = {
   container: null,
   header_box: null,
   title: "Our Projects",
-  view_more_button: "View More Projects",
+  description:
+    "Our Projects Our Projects Our Projects Our Projects Our Projects ",
+  view_more_buttons_levoGroup: null,
+  view_more_buttons: [
+    {
+      view_more_button: "View More Projects",
+    },
+    {
+      view_more_button: "Explore All",
+    },
+  ],
   media_layout: null,
   middle_column_layout: null,
-  firstMedia: DEFAULT_IMAGE,
-  secondMedia: DEFAULT_IMAGE,
-  thirdMedia: DEFAULT_IMAGE,
-  fourthMedia: DEFAULT_IMAGE,
+  firstMedia: MEDIA_1,
+  secondMedia: MEDIA_2,
+  thirdMedia: MEDIA_3,
+  fourthMedia: MEDIA_4,
 };
 
 export type IContent2Content = typeof DEFAULT_CONTENT;
@@ -57,15 +144,33 @@ export const Content2: IBlock = {
       label: "Header Box",
       field_interface: "BoxWidget",
     },
+    {
+      key: "header_content_wrapper",
+      label: "Header Content Wrapper",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Title",
       field_interface: "HeadingWidget",
     },
     {
-      key: "view_more_button",
-      label: "View More Button",
-      field_interface: "ButtonWidget",
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "view_more_buttons",
+      label: "View More Buttons Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "view_more_button",
+          label: "View More Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
     {
       key: "media_layout",
@@ -103,18 +208,10 @@ export const Content2: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        container: {
-          "max-width": "72rem",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "base",
-          "padding-right": "base",
-          "padding-top": "5xl",
-          "padding-bottom": "9xl",
-        },
+        container: {},
         header_box: {
           display: "flex",
-          "align-items": "start",
+          "align-items": "center",
           "justify-content": "space-between",
           "flex-wrap": "wrap",
           gap: "xl",
@@ -128,9 +225,7 @@ export const Content2: IBlock = {
             "margin-bottom": "2xl",
           },
         },
-        title: {
-          color: "text-1",
-        },
+        title: {},
         media_layout: {
           display: "flex",
           "column-gap": "2xs",
@@ -195,6 +290,22 @@ export const Content2: IBlock = {
             width: "100%",
           },
         },
+        description: {
+          "margin-top": "4xs",
+        },
+        view_more_buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "row-gap": "sm",
+          "flex-wrap": "wrap",
+          "align-items": "center",
+        },
+        view_more_buttons: Array(2)
+          .fill(0)
+          .map(() => ({
+            view_more_button: {},
+          })),
       },
       content: DEFAULT_CONTENT,
       config: {

package/src/blocks/content/content-2.tsx

@@ -6,16 +6,28 @@ import {
   Section,
   Box,
   Media,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IContent2Content } from "./content-2.schema";
 
-const Content2: React.FC<ILevoBlockBaseProps<IContent2Content>> = ({}) => (
+const Content2: React.FC<ILevoBlockBaseProps<IContent2Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_box">
-        <Heading elementKey="title" />
-        <Button elementKey="view_more_button" />
+        <Box elementKey="header_content_wrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="view_more_buttons_levoGroup" data-levo_group>
+          {(content.view_more_buttons ?? []).map((_: any, index: number) => (
+            <Button
+              key={`view_more_buttons.${index}.view_more_button`}
+              elementKey={`view_more_buttons.${index}.view_more_button`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
       </Box>
       <Box elementKey="media_layout">
         <Media elementKey="firstMedia" alt="media" />