@levo-so/blocks 0.1.54 → 0.1.59

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

@@ -0,0 +1,277 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_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",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  content_wrapper: null,
+  image: DEFAULT_IMAGE,
+  info_section: null,
+  title: "Tapadia Diagnostics in your city",
+  cities_levoGroup: null,
+  cities: [
+    {
+      city_name: "Hyderabad",
+    },
+    {
+      city_name: "Bangalore",
+    },
+    {
+      city_name: "Mumbai",
+    },
+    {
+      city_name: "Pune",
+    },
+    {
+      city_name: "Chennai",
+    },
+    {
+      city_name: "Delhi",
+    },
+    {
+      city_name: "Mysore",
+    },
+    {
+      city_name: "Cochin",
+    },
+    {
+      city_name: "Indore",
+    },
+    {
+      city_name: "Kolkata",
+    },
+  ],
+  cta: "Book Your Test",
+};
+
+export type ICards15Content = typeof DEFAULT_CONTENT;
+
+export const Cards15: IBlock = {
+  category_id: "cards",
+  title: "Cards 15",
+  key: "cards-15",
+  version: "v1",
+  prompt_description:
+    "A diagnostic centers map block with statistics, city buttons, and booking CTA",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+    },
+
+    {
+      key: "image",
+      label: "Image",
+      field_interface: "ImageWidget",
+    },
+
+    {
+      key: "info_section",
+      label: "Info Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "cities",
+      label: "Cities",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "city_name",
+          label: "City Name",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+    {
+      key: "cta",
+      label: "CTA ",
+      field_interface: "ButtonWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "background-color": "background-2",
+          "border-radius": "base",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "lg",
+          "padding-right": "lg",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "justify-content": "space-between",
+          gap: "2xl",
+          mobile: {
+            "flex-direction": "column",
+            gap: "lg",
+          },
+          "background-color": "oklch(0.9738 0.013 11.5415)",
+          "padding-right": "3xl",
+          "padding-left": "3xl",
+          "margin-top": "none",
+        },
+
+        image: {
+          "object-fit": "contain",
+          width: "500px",
+          height: "500px",
+          mobile: {
+            width: "100%",
+            height: "300px",
+          },
+        },
+        info_section: {
+          "background-color": "white",
+          "border-radius": "base",
+          "box-shadow": "default",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          width: "100%",
+          mobile: {
+            width: "100%",
+          },
+        },
+        title: {
+          color: "text-1",
+          "font-size": "2xl",
+          "font-weight": "700",
+          "margin-bottom": "lg",
+        },
+        cities_levoGroup: {
+          display: "flex",
+          "flex-wrap": "wrap",
+          gap: "sm",
+          "margin-bottom": "lg",
+        },
+        "cities.0.city_name": {
+          "background-color": "background-2",
+          color: "text-1",
+          "font-weight": "500",
+          "font-size": "sm",
+          "padding-top": "xs",
+          "padding-bottom": "xs",
+          "padding-left": "sm",
+          "padding-right": "sm",
+          "border-radius": "full",
+          "text-align": "center",
+        },
+        cta_container: {},
+        phone_icon: {
+          width: "16px",
+          height: "16px",
+        },
+        cta_text: {
+          color: "background-1",
+          "font-weight": "600",
+        },
+        cities: [
+          {
+            city_name: {
+              "background-color": "background-3",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+          },
+          {
+            city_name: {
+              "background-color": "background-3",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+          },
+          {
+            city_name: {
+              "background-color": "background-3",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+          },
+          {
+            city_name: {
+              "background-color": "background-3",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+          },
+          {
+            city_name: {
+              "background-color": "background-3",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+          },
+          {
+            city_name: {
+              "background-color": "background-3",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,40 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { ICards15Content } from "./cards-15.schema";
+
+const Cards15: React.FC<ILevoBlockBaseProps<ICards15Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="content_wrapper">
+        <Image alt="India Map" elementKey="image" width={500} height={500} />
+        <Box elementKey="info_section">
+          <Heading elementKey="title" />
+          <Box data-levo_group elementKey="cities_levoGroup">
+            {(content.cities ?? []).map((_, index) => (
+              <Typography
+                key={index}
+                data-levo_group_item
+                elementKey={`cities.${index}.city_name`}
+              />
+            ))}
+          </Box>
+
+          <Button elementKey="cta" />
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cards15;

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

@@ -323,6 +323,15 @@ export const Cards6: IBlock = {
           "Container for the navigation arrows for mobile view, positioned below the cards.",
       },
     },
+    {
+      key: "carousel-navigation-pills-container",
+      label: "Carousel Navigation Pills Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the navigation pills, positioned below the carousel.",
+      },
+    },
     {
       key: "carousel-navigation",
       label: "Carousel Navigation",
@@ -350,6 +359,15 @@ export const Cards6: IBlock = {
           "Right navigation arrow button to navigate to next cards in the carousel.",
       },
     },
+    {
+      key: "carousel-navigation-pill",
+      label: "Carousel Navigation Pill",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Individual navigation pill indicating the current slide.",
+      },
+    },
     {
       key: "cards",
       label: "Cards",
@@ -488,6 +506,20 @@ export const Cards6: IBlock = {
             "margin-top": "xl",
           },
         },
+        "carousel-navigation-pills-container": {
+          display: "flex",
+          "justify-content": "center",
+          "margin-top": "xl",
+          "column-gap": "xs",
+        },
+        "carousel-navigation-pill": {
+          width: "8px",
+          height: "8px",
+          "border-radius": "100px",
+          "background-color": "border",
+          cursor: "pointer",
+          transition: "all 0.3s ease",
+        },
         "carousel-navigation": {
           display: "flex",
           "column-gap": "sm",
@@ -860,6 +892,20 @@ export const Cards6: IBlock = {
             "margin-top": "xl",
           },
         },
+        "carousel-navigation-pills-container": {
+          display: "flex",
+          "justify-content": "center",
+          "margin-top": "xl",
+          "column-gap": "xs",
+        },
+        "carousel-navigation-pill": {
+          width: "8px",
+          height: "8px",
+          "border-radius": "100px",
+          "background-color": "border",
+          cursor: "pointer",
+          transition: "all 0.3s ease",
+        },
         "carousel-navigation": {
           display: "flex",
           "column-gap": "sm",

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,
@@ -9,7 +11,6 @@ import {
   Container,
   Heading,
   Icon,
-  Image,
   Section,
   Typography,
 } from "@levo-so/studio";
@@ -132,6 +133,31 @@ const Cards6: React.FC<ILevoBlockBaseProps<ICards6Content>> = ({ content }) => {
             </Box>
           </Box>
         )}
+        {count > 0 && (
+          <Box elementKey="carousel-navigation-pills-container">
+            {Array(count)
+              ?.fill(0)
+              ?.map((_, index) => (
+                <Box
+                  key={index}
+                  elementKey="carousel-navigation-pill"
+                  style={
+                    index === current
+                      ? {
+                          backgroundColor: "var(--color-brand)",
+                          width: "24px",
+                        }
+                      : {}
+                  }
+                  onClick={() => {
+                    if (api) {
+                      api?.scrollTo(index);
+                    }
+                  }}
+                />
+              ))}
+          </Box>
+        )}
       </Container>
     </Section>
   );

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,