@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,399 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  main_container: null,
+  left_container: null,
+  image: {
+    id: "CISQRrr8Fa61r",
+    filename: "image.png",
+    kind: "image",
+    location: "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV.png",
+    srcset: {
+      "1080w":
+        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1080w.webp",
+      "1200w":
+        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1200w.webp",
+      "1920w":
+        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1920w.webp",
+      "320w":
+        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-320w.webp",
+      "640w":
+        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-640w.webp",
+      "750w":
+        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-750w.webp",
+      "828w":
+        "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-828w.webp",
+      path: "https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-gVHXsJu0gnbHV-1920w.webp 1920w",
+    },
+    mimetype: "image/png",
+  },
+  ctas: [],
+  right_container: null,
+  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.",
+  groups: [
+    {
+      title: "<p>Experience</p>",
+      description: "<p>4-5 + </p>",
+    },
+    {
+      title: "<p>Technical Expertise</p>",
+      description: "<p>Scaling , HR , Operations</p>",
+    },
+  ],
+  social_icons: [
+    {
+      icon: {
+        kind: "icon",
+        data: {
+          id: "facebook",
+          label: "Facebook",
+          tags: ["crypto", "custom", "directional", "facebook"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.75 22.75H10.25V15.5H9.29999C8.71999 15.5 8.25 15.03 8.25 14.45V12.55C8.25 11.97 8.71999 11.5 9.29999 11.5H10.25V9C10.25 6.93 11.93 5.25 14 5.25H16.7C17.28 5.25 17.75 5.71999 17.75 6.29999V8.70001C17.75 9.28001 17.28 9.75 16.7 9.75H14.75V11.5H16.63C16.95 11.5 17.24 11.64 17.44 11.88C17.64 12.12 17.72 12.44 17.66 12.75L17.28 14.65C17.18 15.14 16.75 15.49 16.25 15.49H14.75V22.75ZM11.75 21.25H13.25V14H15.89L16.09 13H13.26V9.29999C13.26 8.71999 13.73 8.25 14.31 8.25H16.26V6.75H14C12.76 6.75 11.75 7.76 11.75 9V13H9.75V14H11.75V21.25Z" fill="var(--color-icon-primary)"/>\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.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.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 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+    },
+    {
+      icon: {
+        kind: "icon",
+        data: {
+          id: "facebook",
+          label: "Facebook",
+          tags: ["crypto", "custom", "directional", "facebook"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.75 22.75H10.25V15.5H9.29999C8.71999 15.5 8.25 15.03 8.25 14.45V12.55C8.25 11.97 8.71999 11.5 9.29999 11.5H10.25V9C10.25 6.93 11.93 5.25 14 5.25H16.7C17.28 5.25 17.75 5.71999 17.75 6.29999V8.70001C17.75 9.28001 17.28 9.75 16.7 9.75H14.75V11.5H16.63C16.95 11.5 17.24 11.64 17.44 11.88C17.64 12.12 17.72 12.44 17.66 12.75L17.28 14.65C17.18 15.14 16.75 15.49 16.25 15.49H14.75V22.75ZM11.75 21.25H13.25V14H15.89L16.09 13H13.26V9.29999C13.26 8.71999 13.73 8.25 14.31 8.25H16.26V6.75H14C12.76 6.75 11.75 7.76 11.75 9V13H9.75V14H11.75V21.25Z" fill="var(--color-icon-primary)"/>\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.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.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 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+    },
+  ],
+  name: "<p>Spohia Reed</p>",
+  social_icon: [
+    {
+      icon: {
+        kind: "icon",
+        data: {
+          id: "facebook",
+          label: "Facebook",
+          tags: ["crypto", "custom", "directional", "facebook"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.75 22.75H10.25V15.5H9.29999C8.71999 15.5 8.25 15.03 8.25 14.45V12.55C8.25 11.97 8.71999 11.5 9.29999 11.5H10.25V9C10.25 6.93 11.93 5.25 14 5.25H16.7C17.28 5.25 17.75 5.71999 17.75 6.29999V8.70001C17.75 9.28001 17.28 9.75 16.7 9.75H14.75V11.5H16.63C16.95 11.5 17.24 11.64 17.44 11.88C17.64 12.12 17.72 12.44 17.66 12.75L17.28 14.65C17.18 15.14 16.75 15.49 16.25 15.49H14.75V22.75ZM11.75 21.25H13.25V14H15.89L16.09 13H13.26V9.29999C13.26 8.71999 13.73 8.25 14.31 8.25H16.26V6.75H14C12.76 6.75 11.75 7.76 11.75 9V13H9.75V14H11.75V21.25Z" fill="var(--color-icon-primary)"/>\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.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.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 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+    },
+    {
+      icon: {
+        kind: "icon",
+        data: {
+          id: "youtube",
+          label: "Youtube",
+          tags: ["crypto", "custom", "directional", "youtube"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17 20.75H7C3.56 20.75 1.25 18.44 1.25 15V9C1.25 5.56 3.56 3.25 7 3.25H17C20.44 3.25 22.75 5.56 22.75 9V15C22.75 18.44 20.44 20.75 17 20.75ZM7 4.75C4.42 4.75 2.75 6.42 2.75 9V15C2.75 17.58 4.42 19.25 7 19.25H17C19.58 19.25 21.25 17.58 21.25 15V9C21.25 6.42 19.58 4.75 17 4.75H7Z" fill="var(--color-icon-primary)"/>\n<path d="M10.5897 15.53C10.2997 15.53 10.0197 15.46 9.76965 15.32C9.18965 14.99 8.84961 14.32 8.84961 13.49V10.53C8.84961 9.7 9.17965 9.03002 9.76965 8.70002C10.3497 8.37002 11.0996 8.42999 11.8096 8.85999L14.2797 10.34C14.9597 10.75 15.3496 11.36 15.3496 12.01C15.3496 12.66 14.9597 13.27 14.2797 13.68L11.8096 15.16C11.3996 15.4 10.9797 15.53 10.5897 15.53ZM10.5897 9.97001C10.5497 9.97001 10.5196 9.98 10.4996 9.99C10.4296 10.03 10.3496 10.21 10.3496 10.52V13.48C10.3496 13.78 10.4296 13.96 10.4996 14.01C10.5796 14.05 10.7697 14.03 11.0297 13.87L13.4996 12.39C13.7496 12.24 13.8397 12.09 13.8397 12C13.8397 11.91 13.7496 11.77 13.4996 11.61L11.0297 10.13C10.8497 10.02 10.6897 9.97001 10.5897 9.97001Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+    },
+  ],
+};
+
+export type IProfile1Content = typeof DEFAULT_CONTENT;
+
+export const Profile1: IBlock = {
+  category_id: "profile",
+  title: "Profile 1",
+  key: "profile-1",
+  version: "v1",
+  prompt_description:
+    "A profile layout with left-right container featuring image, social icons, and grouped content sections",
+  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_icon",
+      label: "Social Icon",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "icon",
+          label: "Icon",
+          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: "name",
+      label: "Name",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "groups",
+      label: "Groups",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "title",
+          label: "Label Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "description",
+          label: "Label Value",
+          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: {
+          "0": {
+            icon: {
+              width: "1px",
+              height: "1px",
+              "font-size": "1px",
+            },
+          },
+          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",
+        },
+        "groups.0.title": {
+          "font-size": "24px",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "8px",
+        },
+        "groups.0.description": {
+          "font-size": "16px",
+          color: "text-2",
+          "line-height": "1.6",
+          "margin-bottom": "16px",
+        },
+        "groups.1.title": {
+          "font-size": "20px",
+          "font-weight": "600",
+          color: "text-1",
+          "margin-bottom": "8px",
+        },
+        "groups.1.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",
+        },
+        name: {
+          "font-size": "5xl",
+          "font-weight": 700,
+        },
+        groups: [
+          {
+            title: {
+              "font-size": "2xl",
+              "font-weight": 600,
+            },
+            wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+          },
+          {
+            title: {
+              "font-size": "2xl",
+              "font-weight": 600,
+            },
+            wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+          },
+        ],
+        groups_levoGroup: {
+          display: "flex",
+          "column-gap": "base",
+          "flex-direction": "row",
+        },
+        social_icons_levoGroup: {
+          display: "flex",
+          "column-gap": "lg",
+        },
+        social_icon: [
+          {
+            icon: {
+              height: "40px",
+              width: "40px",
+              "font-size": "40px",
+            },
+          },
+          {
+            icon: {
+              height: "40px",
+              width: "40px",
+              "font-size": "40px",
+            },
+          },
+        ],
+        social_icon_levoGroup: {
+          display: "flex",
+          "column-gap": "md",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,64 @@
+import {
+  Box,
+  Button,
+  Container,
+  Icon,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IProfile1Content } from "./profile-1.schema";
+
+const Profile1: React.FC<ILevoBlockBaseProps<IProfile1Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="main_container">
+        <Box elementKey="left_container">
+          <Image elementKey="image" alt="Profile image" />
+          <Box elementKey="social_icon_levoGroup" data-levo_group>
+            {(content?.social_icon || [])?.map((_: any, index: any) => (
+              <Icon
+                elementKey={`social_icon.${index}.icon`}
+                key={`profile-1-cta-${index}`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
+          <Box elementKey="ctas_levoGroup" data-levo_group>
+            {(content?.ctas || [])?.map((_, index) => (
+              <Button
+                elementKey={`ctas.${index}.button`}
+                key={`profile-1-cta-${index}`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
+        </Box>
+        <Box elementKey="right_container">
+          <Typography elementKey="name" />
+          <Box elementKey="groups_levoGroup" data-levo_group>
+            {(content?.groups || [])?.map((_, index) => (
+              <Box
+                elementKey={`groups.${index}.wrapper`}
+                key={index}
+                data-levo_group_item
+              >
+                <Typography elementKey={`groups.${index}.title`} />
+                <Typography elementKey={`groups.${index}.description`} />
+              </Box>
+            ))}
+          </Box>
+          <Box elementKey="content_container">
+            <Typography elementKey="content_description" />
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Profile1;