@levo-so/blocks 0.1.54 → 0.1.59

package/src/blocks/cards/cards-14.schema.ts

@@ -0,0 +1,532 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_section: null,
+  main_title: "Performance Metrics Overview",
+  main_description:
+    "Track your key performance indicators and measure growth across important business dimensions.",
+  main_wrapper: null,
+  left_container: null,
+  right_container: null,
+  main_image: {
+    id: "2",
+    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "320w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "1080w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w",
+    },
+  },
+  cards: [
+    {
+      card: null,
+      content_wrapper: null,
+      description:
+        "<p>“Dr. Arvind, an MIT and Stanford alumnus, combines expertise in engineering, management, and technology to drive business growth through innovation, optimization, and digital transformation.”</p>",
+      value_container: null,
+      icon: {
+        kind: "icon",
+        data: {
+          id: "profile-circle",
+          label: "Profile Circle",
+          tags: ["circle", "custom", "profile", "users"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.1205 13.53C12.1005 13.53 12.0705 13.53 12.0505 13.53C12.0205 13.53 11.9805 13.53 11.9505 13.53C9.68047 13.46 7.98047 11.69 7.98047 9.50998C7.98047 7.28998 9.79047 5.47998 12.0105 5.47998C14.2305 5.47998 16.0405 7.28998 16.0405 9.50998C16.0305 11.7 14.3205 13.46 12.1505 13.53C12.1305 13.53 12.1305 13.53 12.1205 13.53ZM12.0005 6.96998C10.6005 6.96998 9.47047 8.10998 9.47047 9.49998C9.47047 10.87 10.5405 11.98 11.9005 12.03C11.9305 12.02 12.0305 12.02 12.1305 12.03C13.4705 11.96 14.5205 10.86 14.5305 9.49998C14.5305 8.10998 13.4005 6.96998 12.0005 6.96998Z" fill="var(--color-icon-primary)"/>\n<path d="M11.9998 22.7499C9.30984 22.7499 6.73984 21.7499 4.74984 19.9299C4.56984 19.7699 4.48984 19.5299 4.50984 19.2999C4.63984 18.1099 5.37984 16.9999 6.60984 16.1799C9.58984 14.1999 14.4198 14.1999 17.3898 16.1799C18.6198 17.0099 19.3598 18.1099 19.4898 19.2999C19.5198 19.5399 19.4298 19.7699 19.2498 19.9299C17.2598 21.7499 14.6898 22.7499 11.9998 22.7499ZM6.07984 19.0999C7.73984 20.4899 9.82984 21.2499 11.9998 21.2499C14.1698 21.2499 16.2598 20.4899 17.9198 19.0999C17.7398 18.4899 17.2598 17.8999 16.5498 17.4199C14.0898 15.7799 9.91984 15.7799 7.43984 17.4199C6.72984 17.8999 6.25984 18.4899 6.07984 19.0999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+      text_container: null,
+      title: "<p>Tim Larry</p>",
+      value: "<p>CEO,Hyphen</p>",
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      description:
+        "<p>“Dr. Arvind, an MIT and Stanford alumnus, combines expertise in engineering, management, and technology to drive business growth through innovation, optimization, and digital transformation.”</p>",
+      value_container: null,
+      icon: {
+        kind: "icon",
+        data: {
+          id: "profile-circle",
+          label: "Profile Circle",
+          tags: ["circle", "custom", "profile", "users"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.1205 13.53C12.1005 13.53 12.0705 13.53 12.0505 13.53C12.0205 13.53 11.9805 13.53 11.9505 13.53C9.68047 13.46 7.98047 11.69 7.98047 9.50998C7.98047 7.28998 9.79047 5.47998 12.0105 5.47998C14.2305 5.47998 16.0405 7.28998 16.0405 9.50998C16.0305 11.7 14.3205 13.46 12.1505 13.53C12.1305 13.53 12.1305 13.53 12.1205 13.53ZM12.0005 6.96998C10.6005 6.96998 9.47047 8.10998 9.47047 9.49998C9.47047 10.87 10.5405 11.98 11.9005 12.03C11.9305 12.02 12.0305 12.02 12.1305 12.03C13.4705 11.96 14.5205 10.86 14.5305 9.49998C14.5305 8.10998 13.4005 6.96998 12.0005 6.96998Z" fill="var(--color-icon-primary)"/>\n<path d="M11.9998 22.7499C9.30984 22.7499 6.73984 21.7499 4.74984 19.9299C4.56984 19.7699 4.48984 19.5299 4.50984 19.2999C4.63984 18.1099 5.37984 16.9999 6.60984 16.1799C9.58984 14.1999 14.4198 14.1999 17.3898 16.1799C18.6198 17.0099 19.3598 18.1099 19.4898 19.2999C19.5198 19.5399 19.4298 19.7699 19.2498 19.9299C17.2598 21.7499 14.6898 22.7499 11.9998 22.7499ZM6.07984 19.0999C7.73984 20.4899 9.82984 21.2499 11.9998 21.2499C14.1698 21.2499 16.2598 20.4899 17.9198 19.0999C17.7398 18.4899 17.2598 17.8999 16.5498 17.4199C14.0898 15.7799 9.91984 15.7799 7.43984 17.4199C6.72984 17.8999 6.25984 18.4899 6.07984 19.0999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+      text_container: null,
+      title: "<p>Tim Larry</p>",
+      value: "<p>CEO,Hyphen</p>",
+    },
+  ],
+};
+
+export type ICards14Content = typeof DEFAULT_CONTENT;
+
+export const Cards14: IBlock = {
+  category_id: "cards",
+  title: "Cards 14",
+  key: "cards-14",
+  version: "v1",
+  prompt_description:
+    "A cards block with header section, content cards with descriptions and value containers containing icon, title and value metrics",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_section",
+      label: "Header Section",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "main_title",
+      label: "Main Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "main_description",
+      label: "Main Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "main_wrapper",
+      label: "Main Wrapper",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "left_container",
+      label: "Left Container",
+      field_interface: "LayoutWidget",
+    },
+
+    {
+      key: "main_image",
+      label: "Main Image",
+      field_interface: "ImageWidget",
+    },
+    {
+      key: "cards",
+      label: "Cards",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card Container",
+          field_interface: "LayoutWidget",
+        },
+        {
+          key: "content_wrapper",
+          label: "Content Wrapper",
+          field_interface: "LayoutWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "value_container",
+          label: "Value Container",
+          field_interface: "LayoutWidget",
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+        },
+        {
+          key: "text_container",
+          label: "Text Container",
+          field_interface: "LayoutWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "value",
+          label: "Value",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "base",
+          "padding-right": "base",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "none",
+          "padding-right": "none",
+        },
+        header_section: {
+          "text-align": "center",
+          "margin-bottom": "3xl",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "block",
+          "justify-content": "space-between",
+          tablet: {
+            "flex-direction": "column",
+          },
+        },
+        main_description: {
+          "font-size": "lg",
+          color: "text-2",
+          "line-height": "1.6",
+          mobile: {
+            "font-size": "base",
+          },
+        },
+        main_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "2xl",
+            "column-gap": "none",
+          },
+          tablet: {
+            "flex-direction": "column-reverse",
+            "row-gap": "5xl",
+          },
+          "flex-direction": "row-reverse",
+          "column-gap": "xl",
+        },
+        left_container: {
+          flex: "1",
+        },
+        right_container: {
+          flex: "1",
+          display: "block",
+          "justify-content": "center",
+        },
+        main_image: {
+          "border-radius": "lg",
+          "object-fit": "cover",
+          height: "500px",
+          width: "50%",
+          tablet: {
+            width: "100%",
+            height: "auto",
+          },
+        },
+        cards_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        "cards.*.card": {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "flex-start",
+          "column-gap": "base",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          "background-color": "background-2",
+          "border-radius": "lg",
+          "border-width": "1px",
+          "border-color": "border",
+        },
+        "cards.*.content_wrapper": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          flex: "1",
+        },
+        "cards.*.description": {
+          "font-size": "base",
+          color: "text-2",
+          "line-height": "1.5",
+          "margin-bottom": "lg",
+        },
+        "cards.*.value_container": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "base",
+        },
+        "cards.*.icon": {
+          width: "48px",
+          height: "48px",
+          "border-radius": "sm",
+          "object-fit": "cover",
+          "flex-shrink": "0",
+        },
+        "cards.*.text_container": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+          flex: "1",
+        },
+        "cards.*.title": {
+          "font-size": "xl",
+          "font-weight": "600",
+          color: "text-1",
+        },
+        "cards.*.value": {
+          "font-size": "2xl",
+          "font-weight": "700",
+          color: "text-1",
+        },
+        cards: [
+          {
+            card: {
+              "background-color": "brandSecondary",
+              "padding-top": "3xl",
+              "padding-right": "3xl",
+              "padding-left": "3xl",
+              "padding-bottom": "3xl",
+              "border-radius": "base",
+              display: "flex",
+              "flex-direction": "column",
+            },
+            description: {
+              tablet: {
+                "font-size": "base",
+              },
+              "font-size": "base",
+              mobile: {
+                "font-size": "sm",
+              },
+            },
+            value_container: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+              "margin-top": "base",
+            },
+            icon: {
+              height: "34px",
+              width: "34px",
+              "font-size": "34px",
+            },
+            text_container: {
+              display: "block",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            title: {
+              tablet: {
+                "font-size": "lg",
+              },
+              "font-size": "lg",
+              mobile: {
+                "font-size": "base",
+              },
+            },
+            value: {
+              tablet: {
+                "font-size": "xl",
+              },
+              mobile: {
+                "font-size": "lg",
+              },
+            },
+          },
+          {
+            card: {
+              "background-color": "brandSecondary",
+              "padding-top": "3xl",
+              "padding-right": "3xl",
+              "padding-left": "3xl",
+              "padding-bottom": "3xl",
+              "border-radius": "base",
+              display: "flex",
+              "flex-direction": "column",
+            },
+            description: {
+              tablet: {
+                "font-size": "base",
+              },
+              "font-size": "base",
+              mobile: {
+                "font-size": "sm",
+              },
+            },
+            value_container: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+              "margin-top": "base",
+            },
+            icon: {
+              height: "34px",
+              width: "34px",
+              "font-size": "34px",
+            },
+            text_container: {
+              display: "block",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            title: {
+              tablet: {
+                "font-size": "lg",
+              },
+              "font-size": "lg",
+              mobile: {
+                "font-size": "base",
+              },
+            },
+            value: {
+              tablet: {
+                "font-size": "xl",
+              },
+              mobile: {
+                "font-size": "lg",
+              },
+            },
+          },
+          {
+            card: {
+              "background-color": "brandSecondary",
+              "padding-top": "3xl",
+              "padding-right": "3xl",
+              "padding-left": "3xl",
+              "padding-bottom": "3xl",
+              "border-radius": "base",
+              display: "flex",
+              "flex-direction": "column",
+            },
+            description: {
+              tablet: {
+                "font-size": "base",
+              },
+              "font-size": "base",
+              mobile: {
+                "font-size": "sm",
+              },
+            },
+            value_container: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "base",
+            },
+            icon: {
+              height: "34px",
+              width: "34px",
+              "font-size": "34px",
+            },
+            text_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            title: {
+              tablet: {
+                "font-size": "lg",
+              },
+              "font-size": "lg",
+              mobile: {
+                "font-size": "base",
+              },
+            },
+            value: {
+              "font-size": "xl",
+              "font-weight": "700",
+              tablet: {
+                "font-size": "xl",
+              },
+              mobile: {
+                "font-size": "lg",
+              },
+            },
+          },
+          {
+            card: {
+              "background-color": "brandSecondary",
+              "padding-top": "3xl",
+              "padding-right": "3xl",
+              "padding-left": "3xl",
+              "padding-bottom": "3xl",
+              "border-radius": "base",
+              display: "flex",
+              "flex-direction": "column",
+            },
+            description: {
+              tablet: {
+                "font-size": "base",
+              },
+              "font-size": "base",
+              mobile: {
+                "font-size": "sm",
+              },
+            },
+            value_container: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "base",
+            },
+            icon: {
+              height: "34px",
+              width: "34px",
+              "font-size": "34px",
+            },
+            text_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            title: {
+              tablet: {
+                "font-size": "lg",
+              },
+              "font-size": "lg",
+              mobile: {
+                "font-size": "base",
+              },
+            },
+            value: {
+              "font-size": "xl",
+              "font-weight": "700",
+              tablet: {
+                "font-size": "xl",
+              },
+              mobile: {
+                "font-size": "lg",
+              },
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/cards/cards-14.tsx

@@ -0,0 +1,54 @@
+import {
+  Box,
+  Container,
+  Heading,
+  Image,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+  Icon,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { ICards14Content } from "./cards-14.schema";
+
+const Cards14: React.FC<ILevoBlockBaseProps<ICards14Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_section">
+        <Heading elementKey="main_title" />
+        <Typography elementKey="main_description" />
+      </Box>
+      <Box elementKey="main_wrapper">
+        <Box elementKey="left_container">
+          <Box elementKey="cards_levoGroup" data-levo_group>
+            {(content?.cards ?? []).map((_, index: number) => (
+              <Box
+                key={`card-${index}`}
+                data-levo_group_item
+                elementKey={`cards.${index}.card`}
+              >
+                <Box elementKey={`cards.${index}.content_wrapper`}>
+                  <Typography elementKey={`cards.${index}.description`} />
+                  <Box elementKey={`cards.${index}.value_container`}>
+                    <Icon elementKey={`cards.${index}.icon`} />
+                    <Box elementKey={`cards.${index}.text_container`}>
+                      <Heading elementKey={`cards.${index}.title`} />
+                      <Typography elementKey={`cards.${index}.value`} />
+                    </Box>
+                  </Box>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+
+        <Image elementKey="main_image" alt="Feature showcase" />
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cards14;