@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,202 @@
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Container,
+  Heading,
+  Iframe,
+  Image,
+  Icon,
+  Media,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { ITestimonial4Content } from "./testimonial-4.schema";
+
+const Testimonial4: React.FC<ILevoBlockBaseProps<ITestimonial4Content>> = ({
+  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());
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  // Add disabled state logic
+  const isFirstSlide = current === 0;
+  const isLastSlide = current === count - 1;
+
+  const handlePrevious = () => {
+    if (api && !isFirstSlide) {
+      api.scrollTo(current - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (api && !isLastSlide) {
+      api.scrollTo(current + 1);
+    }
+  };
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header">
+          <Box elementKey="header-content">
+            <Box elementKey="badge-container">
+              <Typography elementKey="badge-text" />
+            </Box>
+            <Heading elementKey="title" />
+          </Box>
+          {count > 0 && (
+            <Box elementKey="carousel-navigation-top-container">
+              <Box elementKey="carousel-navigation">
+                <Button
+                  elementKey="carousel-navigation-arrow-left"
+                  onClick={handlePrevious}
+                  disabled={isFirstSlide}
+                  style={{
+                    opacity: isFirstSlide ? 0.5 : 1,
+                    cursor: isFirstSlide ? "not-allowed" : "pointer",
+                  }}
+                ></Button>
+                <Button
+                  elementKey="carousel-navigation-arrow-right"
+                  onClick={handleNext}
+                  disabled={isLastSlide}
+                  style={{
+                    opacity: isLastSlide ? 0.5 : 1,
+                    cursor: isLastSlide ? "not-allowed" : "pointer",
+                  }}
+                ></Button>
+              </Box>
+            </Box>
+          )}
+        </Box>
+        <Box elementKey="carousel-container-wrapper">
+          {count > 0 && (
+            <Box elementKey="carousel-left-arrow-container">
+              <Button
+                elementKey="carousel-navigation-arrow-left"
+                onClick={handlePrevious}
+                disabled={isFirstSlide}
+                style={{
+                  opacity: isFirstSlide ? 0.5 : 1,
+                  cursor: isFirstSlide ? "not-allowed" : "pointer",
+                }}
+              ></Button>
+            </Box>
+          )}
+          {count > 0 && (
+            <Box elementKey="carousel-right-arrow-container">
+              <Button
+                elementKey="carousel-navigation-arrow-right"
+                onClick={handleNext}
+                disabled={isLastSlide}
+                style={{
+                  opacity: isLastSlide ? 0.5 : 1,
+                  cursor: isLastSlide ? "not-allowed" : "pointer",
+                }}
+              ></Button>
+            </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}.testimonial`}>
+                    <Box elementKey={`testimonials.${index}.cover-container`}>
+                      <Media
+                        elementKey={`testimonials.${index}.cover`}
+                        alt="cover"
+                      />
+                      <Iframe
+                        elementKey={`testimonials.${index}.cover_embed`}
+                      />
+                    </Box>
+                    <Box
+                      elementKey={`testimonials.${index}.testimonial-content-wrapper`}
+                    >
+                      <Box
+                        elementKey={`testimonials.${index}.testimonial-content`}
+                      >
+                        <Icon elementKey={`testimonials.${index}.icon`} />
+                        <Box
+                          elementKey={`testimonials.${index}.testimonial-info`}
+                        >
+                          <Typography
+                            elementKey={`testimonials.${index}.testimonial-text`}
+                          />
+
+                          <Box
+                            elementKey={`testimonials.${index}.author-wrapper`}
+                          >
+                            <Heading
+                              elementKey={`testimonials.${index}.author-name`}
+                            />
+                            <Typography
+                              elementKey={`testimonials.${index}.author-position`}
+                            />
+                          </Box>
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Box>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </Box>
+        <Heading elementKey="title_two" />
+        {count > 0 && (
+          <Box elementKey="carousel-navigation-bottom-container">
+            <Box elementKey="carousel-navigation">
+              <Button
+                elementKey="carousel-navigation-arrow-left"
+                onClick={handlePrevious}
+                disabled={isFirstSlide}
+                style={{
+                  opacity: isFirstSlide ? 0.5 : 1,
+                  cursor: isFirstSlide ? "not-allowed" : "pointer",
+                }}
+              ></Button>
+              <Button
+                elementKey="carousel-navigation-arrow-right"
+                onClick={handleNext}
+                disabled={isLastSlide}
+                style={{
+                  opacity: isLastSlide ? 0.5 : 1,
+                  cursor: isLastSlide ? "not-allowed" : "pointer",
+                }}
+              ></Button>
+            </Box>
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Testimonial4;

package/src/blocks/testimonial/testimonial-5/variants/default.ts

@@ -0,0 +1,510 @@
+import type { IBlockLayouts } from "@levo-so/studio";
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "user",
+    label: "User",
+    tags: ["custom", "user", "users"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12 12.75C8.83 12.75 6.25 10.17 6.25 7C6.25 3.83 8.83 1.25 12 1.25C15.17 1.25 17.75 3.83 17.75 7C17.75 10.17 15.17 12.75 12 12.75ZM12 2.75C9.66 2.75 7.75 4.66 7.75 7C7.75 9.34 9.66 11.25 12 11.25C14.34 11.25 16.25 9.34 16.25 7C16.25 4.66 14.34 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n<path d="M20.5901 22.75C20.1801 22.75 19.8401 22.41 19.8401 22C19.8401 18.55 16.3202 15.75 12.0002 15.75C7.68015 15.75 4.16016 18.55 4.16016 22C4.16016 22.41 3.82016 22.75 3.41016 22.75C3.00016 22.75 2.66016 22.41 2.66016 22C2.66016 17.73 6.85015 14.25 12.0002 14.25C17.1502 14.25 21.3401 17.73 21.3401 22C21.3401 22.41 21.0001 22.75 20.5901 22.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_TESTIMONIALS_CONTENT = [
+  {
+    card: null,
+    profileSection: null,
+    avatar: DUMMY_ICON,
+    clientInfo: null,
+    name: "John Smith",
+    position: "Director, Global Supply Chain",
+    quote:
+      "Partnering with SwiftLink, has completely transformed the way we manage our global supply chain. Their ability to provide real-time tracking, proactive communication, and adaptive logistics solutions has helped us reduce delays by over 30% and increase customer satisfaction across regions. What truly sets them apart is their commitment - they feel more like an extension of our internal team than an external vendor.",
+  },
+  {
+    card: null,
+    profileSection: null,
+    avatar: DUMMY_ICON,
+    clientInfo: null,
+    name: "Sarah Chen",
+    position: "VP of Operations",
+    quote:
+      "The platform's innovative approach to supply chain management has revolutionized our operations. The real-time visibility and predictive analytics have enabled us to make data-driven decisions that significantly improved our efficiency and customer satisfaction rates.",
+  },
+  {
+    card: null,
+    profileSection: null,
+    avatar: DUMMY_ICON,
+    clientInfo: null,
+    name: "Michael Rodriguez",
+    position: "Chief Technology Officer",
+    quote:
+      "Implementation was seamless and the results were immediate. The team's expertise and dedication to understanding our unique challenges made all the difference. We've seen remarkable improvements in our logistics performance metrics.",
+  },
+  {
+    card: null,
+    profileSection: null,
+    avatar: DUMMY_ICON,
+    clientInfo: null,
+    name: "Emily Johnson",
+    position: "Supply Chain Manager",
+    quote:
+      "What impressed us most was their proactive approach to problem-solving. They don't just react to issues - they anticipate them. This forward-thinking methodology has saved us countless hours and resources.",
+  },
+];
+
+export const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header: null,
+  textWrapper: null,
+  title: "What Our Clients Say",
+  description:
+    "Hear from industry leaders about their experience with our innovative supply chain solutions.",
+  testimonials: DEFAULT_TESTIMONIALS_CONTENT,
+  "carousel-navigation-container": null,
+  "carousel-navigation": null,
+  "carousel-navigation-pill": null,
+};
+
+const TESTIMONIAL_CARD_STYLE = {
+  card: {
+    display: "flex",
+    "flex-direction": "column",
+    "background-color": "var(--color-background)",
+    "border-radius": "2xl",
+    "box-shadow": "lg",
+    padding: "2xl",
+    "row-gap": "xl",
+    border: "1px solid",
+    "border-color": "var(--color-border)",
+    height: "100%",
+    mobile: {
+      padding: "lg",
+      "row-gap": "lg",
+    },
+  },
+  profileSection: {
+    display: "flex",
+    "align-items": "center",
+    "column-gap": "lg",
+    mobile: {
+      "column-gap": "sm",
+    },
+  },
+  avatar: {
+    height: "64px",
+    width: "64px",
+    "border-radius": "50%",
+    "object-fit": "cover",
+    border: "2px solid",
+    "border-color": "var(--color-border)",
+    mobile: {
+      height: "48px",
+      width: "48px",
+    },
+  },
+  clientInfo: {
+    display: "flex",
+    "flex-direction": "column",
+    "row-gap": "4xs",
+  },
+  name: {
+    color: "var(--color-text-1)",
+    "font-size": "xl",
+    "font-weight": "bold",
+    mobile: {
+      "font-size": "lg",
+    },
+  },
+  position: {
+    color: "var(--color-text-2)",
+    "font-size": "sm",
+    "font-weight": "medium",
+  },
+  quote: {
+    color: "var(--color-text-1)",
+    "font-size": "base",
+    "line-height": 1.6,
+    "font-style": "italic",
+    mobile: {
+      "font-size": "sm",
+    },
+  },
+};
+
+const TESTIMONIALS_STYLES = Array(DEFAULT_TESTIMONIALS_CONTENT.length)
+  ?.fill(0)
+  ?.map(() => TESTIMONIAL_CARD_STYLE);
+
+export const defaultTestimonial5Variant: IBlockLayouts = {
+  key: "default",
+  title: "Default",
+  styles: {
+    layout: {
+      width: "100%",
+      "padding-top": "10xl",
+      "padding-bottom": "10xl",
+      "padding-right": "8xl",
+      "padding-left": "8xl",
+      "media:max:768px": {
+        "padding-top": "5xl",
+        "padding-bottom": "5xl",
+        "padding-right": "5xl",
+        "padding-left": "5xl",
+      },
+      "media:max:480px": {
+        "padding-top": "2xl",
+        "padding-bottom": "2xl",
+        "padding-right": "2xl",
+        "padding-left": "2xl",
+      },
+    },
+    container: {
+      width: "100%",
+      display: "flex",
+      "flex-direction": "column",
+      "row-gap": "7xl",
+      "media:max:768px": {
+        "row-gap": "3xl",
+      },
+      "media:max:480px": {
+        "row-gap": "4xl",
+      },
+    },
+    header: {
+      display: "flex",
+      "justify-content": "center",
+      "margin-bottom": "3xl",
+      tablet: {
+        "margin-bottom": "2xl",
+      },
+    },
+    textWrapper: {
+      display: "flex",
+      "flex-direction": "column",
+      "align-items": "center",
+      "text-align": "center",
+      "row-gap": "sm",
+      "max-width": "600px",
+    },
+    title: {
+      "font-size": "3xl",
+      "font-weight": "bold",
+      color: "var(--color-text-1)",
+      tablet: {
+        "font-size": "2xl",
+      },
+    },
+    description: {
+      "font-size": "lg",
+      color: "var(--color-text-2)",
+      tablet: {
+        "font-size": "base",
+      },
+    },
+    testimonials_levoGroup: {
+      number_of_slides: 1,
+      tablet: {
+        number_of_slides: 1,
+      },
+      mobile: {
+        number_of_slides: 1,
+      },
+    },
+    testimonials: [
+      {
+        card: {
+          display: "flex",
+          "flex-direction": "column-reverse",
+          "background-color": "var(--color-background)",
+          "border-radius": "2xl",
+          "box-shadow": "lg",
+          padding: "2xl",
+          "row-gap": "xl",
+          border: "1px solid",
+          "border-color": "var(--color-border)",
+          height: "100%",
+          mobile: {
+            padding: "lg",
+            "row-gap": "lg",
+          },
+        },
+        profileSection: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          mobile: {
+            "column-gap": "sm",
+          },
+        },
+        avatar: {
+          height: "64px",
+          width: "64px",
+          "border-radius": "50%",
+          "object-fit": "cover",
+          border: "2px solid",
+          "border-color": "var(--color-border)",
+          mobile: {
+            height: "48px",
+            width: "48px",
+          },
+        },
+        clientInfo: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xs",
+        },
+        name: {
+          color: "var(--color-text-1)",
+          "font-size": "xl",
+          "font-weight": "bold",
+          mobile: {
+            "font-size": "lg",
+          },
+        },
+        position: {
+          color: "var(--color-text-2)",
+          "font-size": "sm",
+          "font-weight": "medium",
+        },
+        quote: {
+          color: "var(--color-text-1)",
+          "font-size": "base",
+          "line-height": 1.6,
+          "font-style": "italic",
+          mobile: {
+            "font-size": "sm",
+          },
+        },
+      },
+      {
+        card: {
+          display: "flex",
+          "flex-direction": "column-reverse",
+          "background-color": "var(--color-background)",
+          "border-radius": "2xl",
+          "box-shadow": "lg",
+          padding: "2xl",
+          "row-gap": "xl",
+          border: "1px solid",
+          "border-color": "var(--color-border)",
+          height: "100%",
+          mobile: {
+            padding: "lg",
+            "row-gap": "lg",
+          },
+        },
+        profileSection: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          mobile: {
+            "column-gap": "sm",
+          },
+        },
+        avatar: {
+          height: "64px",
+          width: "64px",
+          "border-radius": "50%",
+          "object-fit": "cover",
+          border: "2px solid",
+          "border-color": "var(--color-border)",
+          mobile: {
+            height: "48px",
+            width: "48px",
+          },
+        },
+        clientInfo: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xs",
+        },
+        name: {
+          color: "var(--color-text-1)",
+          "font-size": "xl",
+          "font-weight": "bold",
+          mobile: {
+            "font-size": "lg",
+          },
+        },
+        position: {
+          color: "var(--color-text-2)",
+          "font-size": "sm",
+          "font-weight": "medium",
+        },
+        quote: {
+          color: "var(--color-text-1)",
+          "font-size": "base",
+          "line-height": 1.6,
+          "font-style": "italic",
+          mobile: {
+            "font-size": "sm",
+          },
+        },
+      },
+      {
+        card: {
+          display: "flex",
+          "flex-direction": "column-reverse",
+          "background-color": "var(--color-background)",
+          "border-radius": "2xl",
+          "box-shadow": "lg",
+          padding: "2xl",
+          "row-gap": "xl",
+          border: "1px solid",
+          "border-color": "var(--color-border)",
+          height: "100%",
+          mobile: {
+            padding: "lg",
+            "row-gap": "lg",
+          },
+        },
+        profileSection: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          mobile: {
+            "column-gap": "sm",
+          },
+        },
+        avatar: {
+          height: "64px",
+          width: "64px",
+          "border-radius": "50%",
+          "object-fit": "cover",
+          border: "2px solid",
+          "border-color": "var(--color-border)",
+          mobile: {
+            height: "48px",
+            width: "48px",
+          },
+        },
+        clientInfo: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xs",
+        },
+        name: {
+          color: "var(--color-text-1)",
+          "font-size": "xl",
+          "font-weight": "bold",
+          mobile: {
+            "font-size": "lg",
+          },
+        },
+        position: {
+          color: "var(--color-text-2)",
+          "font-size": "sm",
+          "font-weight": "medium",
+        },
+        quote: {
+          color: "var(--color-text-1)",
+          "font-size": "base",
+          "line-height": 1.6,
+          "font-style": "italic",
+          mobile: {
+            "font-size": "sm",
+          },
+        },
+      },
+      {
+        card: {
+          display: "flex",
+          "flex-direction": "column",
+          "background-color": "var(--color-background)",
+          "border-radius": "2xl",
+          "box-shadow": "lg",
+          padding: "2xl",
+          "row-gap": "xl",
+          border: "1px solid",
+          "border-color": "var(--color-border)",
+          height: "100%",
+          mobile: {
+            padding: "lg",
+            "row-gap": "lg",
+          },
+        },
+        profileSection: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          mobile: {
+            "column-gap": "sm",
+          },
+        },
+        avatar: {
+          height: "64px",
+          width: "64px",
+          "border-radius": "50%",
+          "object-fit": "cover",
+          border: "2px solid",
+          "border-color": "var(--color-border)",
+          mobile: {
+            height: "48px",
+            width: "48px",
+          },
+        },
+        clientInfo: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xs",
+        },
+        name: {
+          color: "var(--color-text-1)",
+          "font-size": "xl",
+          "font-weight": "bold",
+          mobile: {
+            "font-size": "lg",
+          },
+        },
+        position: {
+          color: "var(--color-text-2)",
+          "font-size": "sm",
+          "font-weight": "medium",
+        },
+        quote: {
+          color: "var(--color-text-1)",
+          "font-size": "base",
+          "line-height": 1.6,
+          "font-style": "italic",
+          mobile: {
+            "font-size": "sm",
+          },
+        },
+      },
+    ],
+    "carousel-navigation-container": {
+      display: "flex",
+      "justify-content": "center",
+      "margin-top": "2xl",
+    },
+    "carousel-navigation": {
+      display: "flex",
+      "column-gap": "sm",
+      "align-items": "center",
+    },
+    "carousel-navigation-pill": {
+      width: "8px",
+      height: "8px",
+      "border-radius": "8px",
+      "background-color": "var(--color-border)",
+      cursor: "pointer",
+      transition: "all 0.3s ease",
+      "&:hover": {
+        "background-color": "var(--color-brand-secondary)",
+      },
+      filter: "none",
+    },
+  },
+  content: DEFAULT_CONTENT,
+  config: {
+    testimonials_levoGroup: {
+      carousel: {
+        loop: true,
+        autoPlay: false,
+      },
+    },
+  },
+};