@levo-so/blocks 0.1.54 → 0.1.59

package/src/blocks/testimonial/testimonial-7.schema.ts

@@ -0,0 +1,438 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "star",
+    label: "Star",
+    tags: ["custom", "directional", "star", "support-like-question"],
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17.6601 22.6701C17.1301 22.6701 16.4501 22.5001 15.6001 22.0001L12.6101 20.2301C12.3001 20.0501 11.7001 20.0501 11.4001 20.2301L8.40012 22.0001C6.63012 23.0501 5.59012 22.6301 5.12012 22.2901C4.66012 21.9501 3.94012 21.0801 4.41012 19.0801L5.12012 16.0101C5.20012 15.6901 5.04012 15.1401 4.80012 14.9001L2.32012 12.4201C1.08012 11.1801 1.18012 10.1201 1.35012 9.60007C1.52012 9.08007 2.06012 8.16007 3.78012 7.87007L6.97012 7.34007C7.27012 7.29007 7.70012 6.97007 7.83012 6.70007L9.60012 3.17007C10.4001 1.56007 11.4501 1.32007 12.0001 1.32007C12.5501 1.32007 13.6001 1.56007 14.4001 3.17007L16.1601 6.69007C16.3001 6.96007 16.7301 7.28007 17.0301 7.33007L20.2201 7.86007C21.9501 8.15007 22.4901 9.07007 22.6501 9.59007C22.8101 10.1101 22.9101 11.1701 21.6801 12.4101L19.2001 14.9001C18.9601 15.1401 18.8101 15.6801 18.8801 16.0101L19.5901 19.0801C20.0501 21.0801 19.3401 21.9501 18.8801 22.2901C18.6301 22.4701 18.2301 22.6701 17.6601 22.6701ZM12.0001 18.5901C12.4901 18.5901 12.9801 18.7101 13.3701 18.9401L16.3601 20.7101C17.2301 21.2301 17.7801 21.2301 17.9901 21.0801C18.2001 20.9301 18.3501 20.4001 18.1301 19.4201L17.4201 16.3501C17.2301 15.5201 17.5401 14.4501 18.1401 13.8401L20.6201 11.3601C21.1101 10.8701 21.3301 10.3901 21.2301 10.0601C21.1201 9.73007 20.6601 9.46007 19.9801 9.35007L16.7901 8.82007C16.0201 8.69007 15.1801 8.07007 14.8301 7.37007L13.0701 3.85007C12.7501 3.21007 12.3501 2.83007 12.0001 2.83007C11.6501 2.83007 11.2501 3.21007 10.9401 3.85007L9.17012 7.37007C8.82012 8.07007 7.98012 8.69007 7.21012 8.82007L4.03012 9.35007C3.35012 9.46007 2.89012 9.73007 2.78012 10.0601C2.67012 10.3901 2.90012 10.8801 3.39012 11.3601L5.87012 13.8401C6.47012 14.4401 6.78012 15.5201 6.59012 16.3501L5.88012 19.4201C5.65012 20.4101 5.81012 20.9301 6.02012 21.0801C6.23012 21.2301 6.77012 21.2201 7.65012 20.7101L10.6401 18.9401C11.0201 18.7101 11.5101 18.5901 12.0001 18.5901Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_container: null,
+  title: "Client Testimonials",
+  description:
+    "Hear what our valued customers have to say about their experience with our services",
+  testimonials_levoGroup: null,
+  testimonials: [
+    {
+      card: null,
+      content_container: null,
+      title_desc_box: null,
+      title: "Exceptional Service Quality",
+      description:
+        "The team delivered outstanding results that exceeded our expectations. Their attention to detail and professional approach made the entire process smooth and efficient.",
+      persona_container: null,
+      persona_name: "Sarah Johnson",
+      stars: [
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+      ],
+    },
+    {
+      card: null,
+      content_container: null,
+      title_desc_box: null,
+      title: "Professional Expertise",
+      description:
+        "Working with this team has been a game-changer for our business. Their expertise and innovative solutions helped us achieve remarkable results.",
+      persona_container: null,
+      persona_name: "Michael Chen",
+      stars: [
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+      ],
+    },
+    {
+      card: null,
+      content_container: null,
+      title_desc_box: null,
+      title: "Outstanding Results",
+      description:
+        "The transformation we experienced was remarkable. The team delivered exactly what they promised and went above and beyond our expectations.",
+      persona_container: null,
+      persona_name: "Emily Rodriguez",
+      stars: [
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+        {
+          star: DUMMY_ICON,
+        },
+      ],
+    },
+  ],
+  "carousel-navigation-container": null,
+  "carousel-navigation": null,
+  "carousel-navigation-pill": null,
+};
+
+export type ITestimonial7Content = typeof DEFAULT_CONTENT;
+
+export const Testimonial7: IBlock = {
+  category_id: "testimonial",
+  title: "Testimonial 7",
+  key: "testimonial-7",
+  version: "v1",
+  prompt_description:
+    "A testimonial block with header container and repeatable cards, each containing title, description, persona name and star ratings",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_container",
+      label: "Header Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "testimonials",
+      label: "Testimonials",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "content_container",
+          label: "Content Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "title_desc_box",
+          label: "Title Description Box",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "persona_container",
+          label: "Persona Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "persona_name",
+          label: "Persona Name",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "designation",
+          label: "Persona designation",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "stars",
+          label: "Stars",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "star",
+              label: "Star",
+              field_interface: "IconWidget",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      key: "carousel-navigation-container",
+      label: "Carousel Navigation Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "carousel-navigation",
+      label: "Carousel Navigation",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "carousel-navigation-pill",
+      label: "Carousel Navigation Pill",
+      field_interface: "BoxWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "lg",
+          "padding-right": "lg",
+        },
+        header_container: {
+          "text-align": "center",
+          "margin-bottom": "2xl",
+        },
+        title: {
+          color: "text-1",
+          "margin-bottom": "base",
+        },
+        description: {
+          color: "text-2",
+          "max-width": "600px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        testimonials_levoGroup: {
+          number_of_slides: 1,
+        },
+        testimonials: [
+          {
+            card: {
+              "border-radius": "base",
+              "box-shadow": "default",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-color": "border",
+              "border-width": "1px",
+            },
+            content_container: {
+              display: "flex",
+              "flex-direction": "column",
+              gap: "lg",
+            },
+            title_desc_box: {
+              "text-align": "center",
+            },
+            title: {
+              color: "text-1",
+              "font-size": "lg",
+              "font-weight": "600",
+              "margin-bottom": "sm",
+            },
+            description: {
+              color: "text-2",
+              "line-height": "1.6",
+            },
+            persona_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              gap: "sm",
+            },
+            persona_name: {
+              color: "text-1",
+              "font-weight": "600",
+              "text-align": "center",
+            },
+            stars: {
+              display: "flex",
+              gap: "2xs",
+            },
+            star: {
+              color: "warning",
+              width: "16px",
+              height: "16px",
+            },
+          },
+          {
+            card: {
+              "border-radius": "base",
+              "box-shadow": "default",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-color": "border",
+              "border-width": "1px",
+            },
+            content_container: {
+              display: "flex",
+              "flex-direction": "column",
+              gap: "lg",
+            },
+            title_desc_box: {
+              "text-align": "center",
+            },
+            title: {
+              color: "text-1",
+              "font-size": "lg",
+              "font-weight": "600",
+              "margin-bottom": "sm",
+            },
+            description: {
+              color: "text-2",
+              "line-height": "1.6",
+            },
+            persona_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              gap: "sm",
+            },
+            persona_name: {
+              color: "text-1",
+              "font-weight": "600",
+              "text-align": "center",
+            },
+            stars: {
+              display: "flex",
+              gap: "2xs",
+            },
+            star: {
+              color: "warning",
+              width: "16px",
+              height: "16px",
+            },
+          },
+          {
+            card: {
+              "border-radius": "base",
+              "box-shadow": "default",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-color": "border",
+              "border-width": "1px",
+            },
+            content_container: {
+              display: "flex",
+              "flex-direction": "column",
+              gap: "lg",
+            },
+            title_desc_box: {
+              "text-align": "center",
+            },
+            title: {
+              color: "text-1",
+              "font-size": "lg",
+              "font-weight": "600",
+              "margin-bottom": "sm",
+            },
+            description: {
+              color: "text-2",
+              "line-height": "1.6",
+            },
+            persona_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              gap: "sm",
+            },
+            persona_name: {
+              color: "text-1",
+              "font-weight": "600",
+              "text-align": "center",
+            },
+            stars: {
+              display: "flex",
+              gap: "2xs",
+            },
+            star: {
+              color: "warning",
+              width: "16px",
+              height: "16px",
+            },
+          },
+        ],
+        "carousel-navigation-container": {
+          display: "flex",
+          "justify-content": "center",
+          "align-items": "center",
+          "padding-top": "lg",
+        },
+        "carousel-navigation": {
+          display: "flex",
+          "column-gap": "xs",
+        },
+        "carousel-navigation-pill": {
+          width: "8px",
+          height: "8px",
+          "border-radius": "50%",
+          "border-color": "border",
+          "border-width": "1px",
+          cursor: "pointer",
+          "background-color": "transparent",
+          transition: "all 0.2s ease",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        testimonials_levoGroup: {
+          carousel: {
+            loop: true,
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,125 @@
+"use client";
+
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Container,
+  Heading,
+  Icon,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { ITestimonial7Content } from "./testimonial-7.schema";
+
+const Testimonial7: React.FC<ILevoBlockBaseProps<ITestimonial7Content>> = ({
+  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]);
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header_container">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Carousel
+          elementKey="testimonials_levoGroup"
+          className="w-full"
+          setApi={setApi}
+          data-levo_group
+        >
+          <CarouselContent>
+            {(content?.testimonials ?? [])?.map((_: any, index: number) => (
+              <CarouselItem key={index} data-levo_group_item>
+                <Box elementKey={`testimonials.${index}.card`}>
+                  <Box elementKey={`testimonials.${index}.content_container`}>
+                    <Box elementKey={`testimonials.${index}.title_desc_box`}>
+                      <Typography elementKey={`testimonials.${index}.title`} />
+                      <Typography
+                        elementKey={`testimonials.${index}.description`}
+                      />
+                    </Box>
+                    <Box elementKey={`testimonials.${index}.persona_container`}>
+                      <Typography
+                        elementKey={`testimonials.${index}.persona_name`}
+                      />
+                      <Typography
+                        elementKey={`testimonials.${index}.designation`}
+                      />
+                      <Box
+                        elementKey={`testimonials.${index}.stars_levoGroup`}
+                        data-levo_group
+                      >
+                        {(
+                          (content?.testimonials?.[index] as any)?.stars ?? []
+                        ).map((_: any, starIndex: number) => (
+                          <Icon
+                            key={`star-${starIndex}`}
+                            data-levo_group_item
+                            elementKey={`testimonials.${index}.stars.${starIndex}.star`}
+                          />
+                        ))}
+                      </Box>
+                    </Box>
+                  </Box>
+                </Box>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        {count > 0 && (
+          <Box elementKey="carousel-navigation-container">
+            <Box elementKey="carousel-navigation" className="flex gap-x-2">
+              {Array(count)
+                ?.fill(0)
+                ?.map((_, index) => (
+                  <Box
+                    key={index}
+                    elementKey="carousel-navigation-pill"
+                    style={
+                      index + 1 === current
+                        ? {
+                            backgroundColor: "var(--color-brand)",
+                            width: "10px",
+                            height: "10px",
+                          }
+                        : {}
+                    }
+                    onClick={() => {
+                      if (api) {
+                        api?.scrollTo(index);
+                      }
+                    }}
+                  />
+                ))}
+            </Box>
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Testimonial7;