@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,69 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+
+import type { IContent1Content } from "./content-1.schema";
+
+const Content1: React.FC<ILevoBlockBaseProps<IContent1Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_content">
+        <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 elementKey={`sections.${index}.text_content`}>
+                  <Heading elementKey={`sections.${index}.title`} />
+                  <Typography elementKey={`sections.${index}.description`} />
+                </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>
+  </Section>
+);
+
+export default Content1;

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

@@ -0,0 +1,209 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_IMAGE = {
+  id: "7141014160938075687",
+  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+  kind: "image",
+  mimetype: "image/png",
+  srcset: {
+    "1080w":
+      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+    "1200w":
+      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-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",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_box: null,
+  title: "Our Projects",
+  view_more_button: "View More Projects",
+  media_layout: null,
+  middle_column_layout: null,
+  firstMedia: DEFAULT_IMAGE,
+  secondMedia: DEFAULT_IMAGE,
+  thirdMedia: DEFAULT_IMAGE,
+  fourthMedia: DEFAULT_IMAGE,
+};
+
+export type IContent2Content = typeof DEFAULT_CONTENT;
+
+export const Content2: IBlock = {
+  category_id: "content",
+  title: "Content 2",
+  key: "content-2",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_box",
+      label: "Header Box",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "view_more_button",
+      label: "View More Button",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "media_layout",
+      label: "Media Layout",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "middle_column_layout",
+      label: "Middle Column Layout",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "firstMedia",
+      label: "Media 1",
+      field_interface: "MediaWidget",
+    },
+    {
+      key: "secondMedia",
+      label: "Media 2",
+      field_interface: "MediaWidget",
+    },
+    {
+      key: "thirdMedia",
+      label: "Media 3",
+      field_interface: "MediaWidget",
+    },
+    {
+      key: "fourthMedia",
+      label: "Media 4",
+      field_interface: "MediaWidget",
+    },
+  ],
+  layouts: [
+    {
+      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",
+        },
+        header_box: {
+          display: "flex",
+          "align-items": "start",
+          "justify-content": "space-between",
+          "flex-wrap": "wrap",
+          gap: "xl",
+          "margin-bottom": "5xl",
+          tablet: {
+            "align-items": "center",
+          },
+          mobile: {
+            "justify-content": "center",
+            "row-gap": "sm",
+            "margin-bottom": "2xl",
+          },
+        },
+        title: {
+          "font-size": "5xl",
+          "font-weight": "600",
+          color: "text-1",
+          "letter-spacing": "-0.015em",
+          tablet: {
+            "font-size": "4xl",
+          },
+        },
+        media_layout: {
+          display: "flex",
+          "column-gap": "2xs",
+          tablet: {
+            "flex-wrap": "wrap",
+            "row-gap": "2xs",
+          },
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        firstMedia: {
+          width: "30%",
+          "border-radius": "2xl",
+          tablet: {
+            flex: "auto",
+          },
+          mobile: {
+            width: "100%",
+          },
+        },
+        fourthMedia: {
+          width: "30%",
+          "border-radius": "2xl",
+          tablet: {
+            flex: "auto",
+          },
+          mobile: {
+            width: "100%",
+          },
+        },
+        middle_column_layout: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+          tablet: {
+            order: 3,
+            "flex-direction": "row",
+            "column-gap": "2xs",
+          },
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        secondMedia: {
+          "border-radius": "2xl",
+          tablet: {
+            width: "40%",
+            flex: "auto",
+          },
+          mobile: {
+            width: "100%",
+          },
+        },
+        thirdMedia: {
+          "border-radius": "2xl",
+          tablet: {
+            width: "40%",
+            flex: "auto",
+          },
+          mobile: {
+            width: "100%",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,32 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Container,
+  Section,
+  Box,
+  Media,
+} from "@levo-so/studio";
+
+import type { IContent2Content } from "./content-2.schema";
+
+const Content2: React.FC<ILevoBlockBaseProps<IContent2Content>> = ({}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_box">
+        <Heading elementKey="title" />
+        <Button elementKey="view_more_button" />
+      </Box>
+      <Box elementKey="media_layout">
+        <Media elementKey="firstMedia" alt="media" />
+        <Box elementKey="middle_column_layout">
+          <Media elementKey="secondMedia" alt="media" />
+          <Media elementKey="thirdMedia" alt="media" />
+        </Box>
+        <Media elementKey="fourthMedia" alt="media" />
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Content2;