@levo-so/blocks 0.1.54 → 0.1.58

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

@@ -0,0 +1,159 @@
+"use client";
+
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Typography,
+  Container,
+  Section,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Box,
+  Icon,
+  Button,
+  Media,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { ICarousel2Content } from "./carousel-2.schema";
+
+const Carousel2: React.FC<ILevoBlockBaseProps<ICarousel2Content>> = ({
+  content,
+}) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  // Add disabled state logic
+  const isFirstSlide = current === 1; // current is 1-based index from logic above
+  const isLastSlide = current === count;
+
+  const handlePrevious = () => {
+    if (api && !isFirstSlide) {
+      api.scrollPrev();
+    }
+  };
+
+  const handleNext = () => {
+    if (api && !isLastSlide) {
+      api.scrollNext();
+    }
+  };
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header">
+          <Box elementKey="header-content">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+          {count > 0 && (
+            <Box elementKey="carousel-navigation-top-container">
+              <Button
+                elementKey="carousel-navigation-arrow-left"
+                onClick={handlePrevious}
+                disabled={isFirstSlide}
+                style={{
+                  opacity: isFirstSlide ? 0.5 : 1,
+                  cursor: isFirstSlide ? "not-allowed" : "pointer",
+                }}
+              />
+
+              <Button
+                elementKey="carousel-navigation-arrow-right"
+                onClick={handleNext}
+                disabled={isLastSlide}
+                style={{
+                  opacity: isLastSlide ? 0.5 : 1,
+                  cursor: isLastSlide ? "not-allowed" : "pointer",
+                }}
+              />
+            </Box>
+          )}
+        </Box>
+        <Carousel elementKey="team_levoGroup" setApi={setApi} data-levo_group>
+          <CarouselContent>
+            {(content?.team ?? [])?.map((_: any, index: number) => (
+              <CarouselItem key={index} data-levo_group_item>
+                <Box elementKey={`team.${index}.card`}>
+                  <Media
+                    elementKey={`team.${index}.img`}
+                    alt="Team member photo"
+                  />
+                  <Box elementKey={`team.${index}.info`}>
+                    <Box elementKey={`team.${index}.name-position-wrapper`}>
+                      <Typography elementKey={`team.${index}.name`} />
+                      <Typography elementKey={`team.${index}.description`} />
+                    </Box>
+                    <Box
+                      elementKey={`team.${index}.social_levoGroup`}
+                      data-levo_group
+                    >
+                      {(content?.team?.[index]?.social ?? [])?.map(
+                        (_: any, socialIndex: number) => (
+                          <Icon
+                            key={socialIndex}
+                            data-levo_group_item
+                            elementKey={`team.${index}.social.${socialIndex}.icon`}
+                          />
+                        ),
+                      )}
+                    </Box>
+                  </Box>
+                </Box>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        {count > 0 && (
+          <Box elementKey="carousel-navigation-container">
+            <Box elementKey="carousel-navigation">
+              {Array(count)
+                ?.fill(0)
+                ?.map((_, index) => (
+                  <Box
+                    key={index}
+                    elementKey="carousel-navigation-pill"
+                    style={
+                      index + 1 === current
+                        ? {
+                            backgroundColor: "var(--color-brand)",
+                            width: "24px",
+                          }
+                        : {}
+                    }
+                    onClick={() => {
+                      if (api) {
+                        api?.scrollTo(index);
+                      }
+                    }}
+                  />
+                ))}
+            </Box>
+          </Box>
+        )}
+        <Box elementKey="cta_wrapper">
+          <Button elementKey="cta" />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Carousel2;

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

@@ -107,6 +107,9 @@ const DEFAULT_CONTENT = {
       },
     },
   ],
+  bottom_description:
+    "<p>You can also send your application on email here<br>Email id - &nbsp;jobs@xyz.com.</p>",
+  label: "CurrentJob Openings",
 };
 
 export type IContent5Content = typeof DEFAULT_CONTENT;
@@ -135,6 +138,27 @@ export const Content5: IBlock = {
       label: "Header Wrapper",
       field_interface: "BoxWidget",
     },
+    {
+      key: "label_container",
+      label: "Label Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "label_left_divider",
+      label: "Label Left Divider",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "label_right_divider",
+      label: "Label Right Divider",
+      field_interface: "BoxWidget",
+    },
+
+    {
+      key: "label",
+      label: "Label",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "title",
       label: "Title",
@@ -155,6 +179,11 @@ export const Content5: IBlock = {
       label: "Bottom CTA",
       field_interface: "ButtonWidget",
     },
+    {
+      key: "bottom_description",
+      label: "Bottom Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "jobs",
       label: "Jobs",
@@ -171,6 +200,16 @@ export const Content5: IBlock = {
           label: "Designation Wrapper",
           field_interface: "BoxWidget",
         },
+        {
+          key: "designation_header_wrapper",
+          label: "Designation Header Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "designation_icon",
+          label: "Designation Icon",
+          field_interface: "IconWidget",
+        },
         {
           key: "designation_header",
           label: "Designation Header",
@@ -186,6 +225,16 @@ export const Content5: IBlock = {
           label: "Work Wrapper",
           field_interface: "BoxWidget",
         },
+        {
+          key: "work_header_wrapper",
+          label: "Work Header Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "work_icon",
+          label: "Work Icon",
+          field_interface: "IconWidget",
+        },
         {
           key: "work_header",
           label: "Work Header",
@@ -201,6 +250,16 @@ export const Content5: IBlock = {
           label: "Location Wrapper",
           field_interface: "BoxWidget",
         },
+        {
+          key: "location_header_wrapper",
+          label: "Location Header Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "location_icon",
+          label: "Location Icon",
+          field_interface: "IconWidget",
+        },
         {
           key: "location_header",
           label: "Location Header",
@@ -247,10 +306,12 @@ export const Content5: IBlock = {
         },
         title: {
           "margin-bottom": "base",
+          "text-align": "center",
         },
         description: {
           color: "text-2",
-          "max-width": "600px",
+          display: "block",
+          "text-align": "center",
         },
         jobs_levoGroup: {
           display: "flex",
@@ -259,10 +320,6 @@ export const Content5: IBlock = {
           "margin-bottom": "2xl",
         },
         bottom_cta: {
-          "padding-left": "none",
-          "padding-top": "none",
-          "padding-bottom": "none",
-          "padding-right": "none",
           "margin-left": "auto",
           "margin-right": "auto",
         },
@@ -297,6 +354,15 @@ export const Content5: IBlock = {
               "flex-direction": "column",
               "row-gap": "xs",
             },
+            designation_header_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "2xs",
+            },
+            designation_icon: {
+              width: "16px",
+              height: "16px",
+            },
             designation_header: {
               color: "text-2",
               "font-size": "sm",
@@ -318,6 +384,15 @@ export const Content5: IBlock = {
                 "align-items": "center",
               },
             },
+            work_header_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "2xs",
+            },
+            work_icon: {
+              width: "16px",
+              height: "16px",
+            },
             work_header: {
               color: "text-2",
               "font-size": "sm",
@@ -343,6 +418,15 @@ export const Content5: IBlock = {
                 "align-items": "start",
               },
             },
+            location_header_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "2xs",
+            },
+            location_icon: {
+              width: "16px",
+              height: "16px",
+            },
             location_header: {
               color: "text-2",
               "font-size": "sm",
@@ -433,11 +517,11 @@ export const Content5: IBlock = {
               },
             },
             work_header: {
-              color: "text-2",
               "font-size": "sm",
               "font-weight": "500",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
+              color: "brand",
             },
             work_value: {
               color: "text-1",
@@ -930,6 +1014,28 @@ export const Content5: IBlock = {
             },
           },
         ],
+        bottom_description: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "text-align": "center",
+          "margin-top": "base",
+        },
+        label_left_divider: {
+          height: "2px",
+          width: "30px",
+          "background-color": "brand",
+        },
+        label_right_divider: {
+          height: "2px",
+          width: "30px",
+          "background-color": "brand",
+        },
+        label_container: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "3xs",
+          "justify-content": "center",
+        },
       },
       content: DEFAULT_CONTENT,
       config: {

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

@@ -3,6 +3,7 @@ import {
   Button,
   Container,
   Heading,
+  Icon,
   Section,
   Typography,
   type ILevoBlockBaseProps,
@@ -17,6 +18,11 @@ const Content5: React.FC<ILevoBlockBaseProps<IContent5Content>> = ({
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_wrapper">
+        <Box elementKey="label_container">
+          <Box elementKey="label_left_divider" />
+          <Typography elementKey="label" />
+          <Box elementKey="label_right_divider" />
+        </Box>
         <Heading elementKey="title" />
         <Typography elementKey="description" />
       </Box>
@@ -29,15 +35,24 @@ const Content5: React.FC<ILevoBlockBaseProps<IContent5Content>> = ({
               elementKey={`jobs.${index}.job_item`}
             >
               <Box elementKey={`jobs.${index}.designation_wrapper`}>
-                <Typography elementKey={`jobs.${index}.designation_header`} />
+                <Box elementKey={`jobs.${index}.designation_header_wrapper`}>
+                  <Icon elementKey={`jobs.${index}.designation_icon`} />
+                  <Typography elementKey={`jobs.${index}.designation_header`} />
+                </Box>
                 <Typography elementKey={`jobs.${index}.designation_value`} />
               </Box>
               <Box elementKey={`jobs.${index}.work_wrapper`}>
-                <Typography elementKey={`jobs.${index}.work_header`} />
+                <Box elementKey={`jobs.${index}.work_header_wrapper`}>
+                  <Icon elementKey={`jobs.${index}.work_icon`} />
+                  <Typography elementKey={`jobs.${index}.work_header`} />
+                </Box>
                 <Typography elementKey={`jobs.${index}.work_value`} />
               </Box>
               <Box elementKey={`jobs.${index}.location_wrapper`}>
-                <Typography elementKey={`jobs.${index}.location_header`} />
+                <Box elementKey={`jobs.${index}.location_header_wrapper`}>
+                  <Icon elementKey={`jobs.${index}.location_icon`} />
+                  <Typography elementKey={`jobs.${index}.location_header`} />
+                </Box>
                 <Typography elementKey={`jobs.${index}.location_value`} />
               </Box>
               <Button elementKey={`jobs.${index}.cta`} />
@@ -52,6 +67,7 @@ const Content5: React.FC<ILevoBlockBaseProps<IContent5Content>> = ({
         ))}
       </Box>
       <Button elementKey="bottom_cta" />
+      <Typography elementKey="bottom_description" />
     </Container>
   </Section>
 );

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

@@ -32,7 +32,9 @@ const DEFAULT_CONTENT = {
   companies: [
     {
       company_item: null,
+      image_wrapper: null,
       company_image: DEFAULT_IMAGE,
+      company_name: null,
       work_wrapper: null,
       work_header: "Stage",
       work_value: "Seed",
@@ -44,7 +46,9 @@ const DEFAULT_CONTENT = {
     },
     {
       company_item: null,
+      image_wrapper: null,
       company_image: DEFAULT_IMAGE,
+      company_name: null,
       work_wrapper: null,
       work_header: "Stage",
       work_value: "Growth",
@@ -56,8 +60,9 @@ const DEFAULT_CONTENT = {
     },
     {
       company_item: null,
+      image_wrapper: null,
       company_image: DEFAULT_IMAGE,
-
+      company_name: null,
       work_wrapper: null,
       work_header: "Stage",
       work_value: "Series A",
@@ -106,7 +111,6 @@ export const Content6: IBlock = {
       label: "Description",
       field_interface: "TypographyWidget",
     },
-
     {
       key: "companies",
       label: "Companies",
@@ -118,12 +122,21 @@ export const Content6: IBlock = {
           label: "Company Item",
           field_interface: "BoxWidget",
         },
+        {
+          key: "image_wrapper",
+          label: "Image Wrapper",
+          field_interface: "BoxWidget",
+        },
         {
           key: "company_image",
           label: "Company Image",
           field_interface: "ImageWidget",
         },
-
+        {
+          key: "company_name",
+          label: "Company Name",
+          field_interface: "TypographyWidget",
+        },
         {
           key: "work_wrapper",
           label: "Work Wrapper",

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

@@ -34,6 +34,7 @@ const Content6: React.FC<ILevoBlockBaseProps<IContent6Content>> = ({
                   elementKey={`companies.${index}.company_image`}
                   alt="Company logo"
                 />
+                <Typography elementKey={`companies.${index}.company_name`} />
               </Box>
 
               <Box elementKey={`companies.${index}.work_wrapper`}>

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

@@ -0,0 +1,125 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  inner_container: null,
+  icon_wrapper: null,
+  description:
+    "Transform your business with our comprehensive platform designed for modern enterprises seeking growth and efficiency.",
+  cta: "Get Started",
+  icon: {
+    kind: "icon",
+    data: {
+      id: "simcard-2",
+      label: "Simcard 2",
+      tags: [
+        "computers-devices-electronics",
+        "custom",
+        "directional",
+        "simcard",
+      ],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.11 22.72H5.89C3.16 22.72 1.25 20.81 1.25 18.08V10.31C1.25 7.58004 3.16 5.67004 5.89 5.67004H9.72C10.94 5.67004 12.14 6.17004 13 7.03004L15.39 9.41004C16.26 10.28 16.75 11.47 16.75 12.69V18.08C16.75 20.81 14.84 22.72 12.11 22.72ZM5.89 7.17004C3.98 7.17004 2.75 8.40004 2.75 10.31V18.08C2.75 19.99 3.98 21.22 5.89 21.22H12.11C14.02 21.22 15.25 19.99 15.25 18.08V12.69C15.25 11.86 14.91 11.06 14.33 10.47L11.94 8.09004C11.35 7.50004 10.54 7.17004 9.72 7.17004H5.89Z" fill="var(--color-icon-primary)"/>\n<path d="M18.11 18.28H16C15.59 18.28 15.25 17.94 15.25 17.53V12.69C15.25 11.86 14.91 11.06 14.33 10.47L11.94 8.08997C11.35 7.49997 10.54 7.16997 9.72 7.16997H8C7.59 7.16997 7.25 6.82997 7.25 6.41997V5.85997C7.25 3.12997 9.16 1.21997 11.89 1.21997H15.72C16.94 1.21997 18.14 1.71997 19 2.57997L21.39 4.96997C22.27 5.84997 22.75 7.00997 22.75 8.24997V13.64C22.75 16.37 20.84 18.28 18.11 18.28ZM16.75 16.78H18.11C20.02 16.78 21.25 15.55 21.25 13.64V8.24997C21.25 7.40997 20.92 6.61997 20.33 6.02997L17.94 3.63997C17.36 3.05997 16.55 2.71997 15.72 2.71997H11.89C10.05 2.71997 8.83 3.86997 8.75 5.66997H9.72C10.94 5.66997 12.14 6.16997 13 7.02997L15.39 9.40997C16.26 10.28 16.75 11.47 16.75 12.69V16.78Z" fill="var(--color-icon-primary)"/>\n</svg>',
+    },
+  },
+};
+
+export type IContent8Content = typeof DEFAULT_CONTENT;
+
+export const Content8: IBlock = {
+  category_id: "content",
+  title: "Content 8",
+  key: "content-8",
+  version: "v1",
+  prompt_description:
+    "Simple feature block with icon, description text, and call-to-action button in a clean centered layout.",
+
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "inner_container",
+      label: "Inner Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "icon",
+      label: "Icon",
+      field_interface: "IconWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "cta",
+      label: "CTA Button",
+      field_interface: "ButtonWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "none",
+          "padding-right": "none",
+          "background-color": "background-2",
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "padding-left": "none",
+          "padding-right": "none",
+        },
+        inner_container: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "row-gap": "lg",
+          "margin-bottom": "none",
+          "justify-content": "center",
+          "column-gap": "base",
+        },
+        icon_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "margin-bottom": "base",
+        },
+        icon: {
+          width: "48px",
+          height: "48px",
+          "object-fit": "contain",
+        },
+        description: {
+          color: "text-1",
+          "font-size": "lg",
+          "line-height": "1.6",
+          "max-width": "600px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        cta: {},
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,27 @@
+import {
+  Box,
+  Button,
+  Container,
+  Icon,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React from "react";
+
+import { type IContent8Content } from "./content-8.schema";
+
+const Content8: React.FC<ILevoBlockBaseProps<IContent8Content>> = ({}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="inner_container">
+        <Icon elementKey="icon" />
+
+        <Typography elementKey="description" />
+      </Box>
+      <Button elementKey="cta" />
+    </Container>
+  </Section>
+);
+
+export default Content8;