@levo-so/blocks 0.1.0 → 0.1.2

package/src/blocks/cta/cta-3.schema.ts

@@ -0,0 +1,156 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  left_content: null,
+  title: "Ready to Give Them Care They Deserve?",
+  description: "Join us in making a difference in the lives of those in need.",
+  cta_wrapper: null,
+  ctas: [{ button: "Contact Us" }],
+  images: [
+    {
+      image: {
+        id: "left-fitness-image",
+        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",
+        },
+      },
+    },
+    {
+      image: {
+        id: "left-fitness-image",
+        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",
+        },
+      },
+    },
+  ],
+};
+
+export type ICta3Content = typeof DEFAULT_CONTENT;
+
+export const Cta3: IBlock = {
+  category_id: "cta",
+  title: "CTA 3",
+  key: "cta-3",
+  version: "v1",
+  prompt_description: "CTA block with text on left and images on right",
+  content_schema: [
+    { key: "layout", label: "Layout", field_interface: "LayoutWidget" },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "left_content",
+      label: "Left Content",
+      field_interface: "BoxWidget",
+    },
+    { key: "title", label: "Title", field_interface: "TypographyWidget" },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        { key: "button", label: "Button", field_interface: "ButtonWidget" },
+      ],
+    },
+    {
+      key: "images",
+      label: "Images",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        { key: "image", label: "Image", field_interface: "ImageWidget" },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        container: {
+          display: "grid",
+          "grid-template-columns": "1fr 1fr",
+          "column-gap": "xl",
+          "align-items": "center",
+        },
+        left_content: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+        },
+        title: {
+          "font-size": "3xl",
+          "font-weight": "700",
+          color: "text-1",
+        },
+        cta_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "base",
+        },
+        images_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "1fr 1fr",
+          "column-gap": "base",
+        },
+        "images.$.image": {
+          "border-radius": "base",
+          "object-fit": "cover",
+          height: "300px",
+          width: "300px",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

package/src/blocks/cta/cta-3.tsx

@@ -0,0 +1,48 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+
+import type { ICta3Content } from "./cta-3.schema";
+
+const Cta3: React.FC<ILevoBlockBaseProps<ICta3Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      {/* Left Side - Text + CTA group */}
+      <Box elementKey="left_content">
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+
+        <Box elementKey="ctas_levoGroup" data-levo_group>
+          {(content?.ctas ?? []).map((_, index: number) => (
+            <Button
+              key={`cta-${index}`}
+              data-levo_group_item
+              elementKey={`ctas.${index}.button`}
+            />
+          ))}
+        </Box>
+      </Box>
+
+      {/* Right Side - Images */}
+      <Box elementKey="images_levoGroup" data-levo_group>
+        {(content?.images ?? []).map((_, index: number) => (
+          <Image
+            key={`image-${index}`}
+            data-levo_group_item
+            elementKey={`images.${index}.image`}
+            alt={`Image ${index + 1}`}
+          />
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cta3;

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

@@ -0,0 +1,153 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+
+  contentWrapper: null,
+  title: "Check out this amazing content",
+  description: "We've got something special to share with you. Take a look!",
+  embed: "",
+};
+
+export type IEmbed1Content = typeof DEFAULT_CONTENT;
+
+export const Embed1: IBlock = {
+  category_id: "embed",
+  title: "Embed 1",
+  key: "embed-1",
+  version: "v1",
+  prompt_description:
+    "Two-column layout with bold headline, brief supporting text, and a call-to-action button on the left, paired with an embedded iframe content on the right.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "contentWrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "textWrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+    {
+      key: "embed",
+      label: "Embed",
+      field_interface: "IframeWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-left": "8xl",
+          "padding-right": "8xl",
+          "padding-top": "8xl",
+          "padding-bottom": "8xl",
+          tablet: {
+            "padding-left": "4xl",
+            "padding-right": "4xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "padding-top": "lg",
+            "padding-bottom": "lg",
+          },
+        },
+        container: {
+          display: "flex",
+          "align-items": "center",
+          "border-radius": "3xl",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          tablet: {
+            "column-gap": "none",
+            "padding-top": "xl",
+          },
+          mobile: {
+            "row-gap": "base",
+            "padding-top": "base",
+          },
+        },
+        embed: {
+          width: "100%",
+          height: "fit-content",
+          tablet: {
+            width: "100%",
+            height: "300px",
+          },
+          mobile: {
+            height: "250px",
+          },
+        },
+        contentWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "justify-content": "center",
+          "row-gap": "base",
+          "padding-left": "none",
+          tablet: {
+            "padding-left": "xl",
+            "padding-right": "xl",
+          },
+          mobile: {
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+        },
+        textWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xs",
+          "align-items": "center",
+        },
+        title: {
+          "font-size": "4xl",
+          mobile: {
+            "font-size": "2xl",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,38 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Heading,
+  Iframe,
+  Section,
+  Typography,
+  Container,
+} from "@levo-so/studio";
+
+import type { IEmbed1Content } from "./embed-1.schema";
+
+const Embed1: React.FC<ILevoBlockBaseProps<IEmbed1Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="contentWrapper">
+        <Box elementKey="textWrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="ctas_levoGroup" data-levo_group>
+          {Array.isArray(content?.ctas) &&
+            content.ctas.map((_, index) => (
+              <Button
+                elementKey={`ctas.${index}.cta`}
+                key={`embed-1-cta-${index}`}
+                data-levo_group_item
+              />
+            ))}
+        </Box>
+      </Box>
+      <Iframe elementKey="embed" />
+    </Container>
+  </Section>
+);
+
+export default Embed1;