@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,161 @@
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Box,
+  Media,
+  Iframe,
+  Icon,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { ITestimonial2Content } from "./testimonial-2.schema";
+
+const Testimonial2: React.FC<ILevoBlockBaseProps<ITestimonial2Content>> = ({
+  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">
+          <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" 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: "24px",
+                            }
+                          : {}
+                      }
+                      onClick={() => {
+                        if (api) {
+                          api?.scrollTo(index);
+                        }
+                      }}
+                    />
+                  ))}
+              </Box>
+            </Box>
+          )}
+        </Box>
+        <Carousel
+          elementKey="testimonials_levoGroup"
+          className="w-full"
+          setApi={setApi}
+          data-levo_group
+        >
+          <CarouselContent>
+            {(content?.testimonials ?? [])?.map((_, index) => (
+              <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>
+        <Heading elementKey="title_two" />
+        {count > 0 && (
+          <Box elementKey="carousel-navigation-bottom-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: "24px",
+                          }
+                        : {}
+                    }
+                    onClick={() => {
+                      if (api) {
+                        api?.scrollTo(index);
+                      }
+                    }}
+                  />
+                ))}
+            </Box>
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Testimonial2;

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

@@ -0,0 +1,279 @@
+import type { IBlock } from "@levo-so/studio";
+
+// Extract image object into a constant for reusability
+const CLIENT_IMAGE = {
+  id: "7141014160938075687",
+  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",
+  },
+};
+
+// Array of testimonials content
+const TESTIMONIALS_CONTENT = [
+  {
+    testimonial_wrapper: null,
+    testimonial_content: null,
+    author_box: null,
+    author_name: "Jeni Smith",
+    author_role: "Head of Operations, Shark Ltd.",
+    testimonial_text:
+      "AI-powered solutions transformed our website! The team's expertise in web development and AI-driven automation helped us build a fast, intuitive, and scalable platform. Our user engagement has skyrocketed, and the seamless AI integrations have made a real impact. Highly recommended!",
+    testimonial_controls: null,
+    image_box: null,
+    client_image: CLIENT_IMAGE,
+  },
+  {
+    testimonial_wrapper: null,
+    testimonial_content: null,
+    author_box: null,
+    author_name: "Mike Johnson",
+    author_role: "CTO, Tech Innovations Inc.",
+    testimonial_text:
+      "The development team exceeded our expectations with their innovative approach to AI integration. Our platform's performance improved dramatically, and the user experience is now seamless across all devices.",
+    testimonial_controls: null,
+    image_box: null,
+    client_image: CLIENT_IMAGE,
+  },
+  {
+    testimonial_wrapper: null,
+    testimonial_content: null,
+    author_box: null,
+    author_name: "Sarah Williams",
+    author_role: "Product Manager, Digital Solutions Co.",
+    testimonial_text:
+      "Working with this team was a game-changer for our business. The AI-powered features they implemented have streamlined our operations and significantly improved our customer satisfaction rates.",
+    testimonial_controls: null,
+    image_box: null,
+    client_image: CLIENT_IMAGE,
+  },
+];
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  title: "What Our Clients Say",
+  button_prev: " ",
+  button_next: " ",
+  testimonials: TESTIMONIALS_CONTENT,
+  button_prev_leftIcon: {
+    kind: "icon",
+    data: {
+      id: "arrow-left",
+      label: "Arrow Left",
+      tags: ["arrow", "custom", "directional", "left"],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M9.57043 18.82C9.38043 18.82 9.19043 18.75 9.04043 18.6L2.97043 12.53C2.68043 12.24 2.68043 11.76 2.97043 11.47L9.04043 5.4C9.33043 5.11 9.81043 5.11 10.1004 5.4C10.3904 5.69 10.3904 6.17 10.1004 6.46L4.56043 12L10.1004 17.54C10.3904 17.83 10.3904 18.31 10.1004 18.6C9.96043 18.75 9.76043 18.82 9.57043 18.82Z" fill="currentColor"/>\n<path d="M20.4999 12.75H3.66992C3.25992 12.75 2.91992 12.41 2.91992 12C2.91992 11.59 3.25992 11.25 3.66992 11.25H20.4999C20.9099 11.25 21.2499 11.59 21.2499 12C21.2499 12.41 20.9099 12.75 20.4999 12.75Z" fill="currentColor"/>\n</svg>',
+    },
+  },
+  button_next_rightIcon: {
+    kind: "icon",
+    data: {
+      id: "arrow-right-1",
+      label: "Arrow Right 1",
+      tags: ["arrow", "custom", "directional", "right"],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.4301 18.82C14.2401 18.82 14.0501 18.75 13.9001 18.6C13.6101 18.31 13.6101 17.83 13.9001 17.54L19.4401 12L13.9001 6.46C13.6101 6.17 13.6101 5.69 13.9001 5.4C14.1901 5.11 14.6701 5.11 14.9601 5.4L21.0301 11.47C21.3201 11.76 21.3201 12.24 21.0301 12.53L14.9601 18.6C14.8101 18.75 14.6201 18.82 14.4301 18.82Z" fill="currentColor"/>\n<path d="M20.33 12.75H3.5C3.09 12.75 2.75 12.41 2.75 12C2.75 11.59 3.09 11.25 3.5 11.25H20.33C20.74 11.25 21.08 11.59 21.08 12C21.08 12.41 20.74 12.75 20.33 12.75Z" fill="currentColor"/>\n</svg>',
+    },
+  },
+};
+
+export type ITestimonial3Content = typeof DEFAULT_CONTENT;
+
+// Testimonial field styles
+const TESTIMONIAL_STYLE = {
+  testimonial_wrapper: {
+    display: "flex",
+    "flex-direction": "row",
+    "align-items": "center",
+    gap: "10xl",
+    mobile: {
+      "flex-direction": "column",
+    },
+  },
+  testimonial_content: {
+    flex: "1 1 0%",
+  },
+  author_box: {
+    "margin-bottom": "6xl",
+  },
+  author_name: {
+    "font-weight": "600",
+    "font-size": "lg",
+    color: "text-1",
+    "margin-bottom": "2xs",
+  },
+  author_role: {
+    color: "text-2",
+    "font-size": "sm",
+  },
+  testimonial_text: {
+    "font-size": "xl",
+    "line-height": "1.625",
+    color: "text-1",
+    "margin-bottom": "8xl",
+  },
+  testimonial_controls: {
+    display: "flex",
+    gap: "base",
+  },
+  image_box: {
+    flex: "1 1 0%",
+    display: "flex",
+    "justify-content": "center",
+  },
+  client_image: {
+    width: "18rem",
+    height: "18rem",
+    "object-fit": "cover",
+    "border-radius": "xl",
+    "background-color": "background-2",
+  },
+};
+
+const TESTIMONIALS_STYLES = Array.from({ length: 3 }, () =>
+  JSON.parse(JSON.stringify(TESTIMONIAL_STYLE)),
+);
+
+export const Testimonial3: IBlock = {
+  category_id: "testimonial",
+  title: "Testimonial 3",
+  key: "testimonial-3",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "testimonials",
+      label: "Testimonials",
+      field_interface: "ArrayWidget",
+      fields: [
+        {
+          key: "testimonial_wrapper",
+          label: "Testimonial Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "testimonial_content",
+          label: "Testimonial Content",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "author_box",
+          label: "Author Box",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "author_name",
+          label: "Author Name",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "author_role",
+          label: "Author Role",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "testimonial_text",
+          label: "Testimonial Text",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "testimonial_controls",
+          label: "Testimonial Controls",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image_box",
+          label: "Image Box",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "client_image",
+          label: "Client Image",
+          field_interface: "ImageWidget",
+        },
+      ],
+    },
+    {
+      key: "button_prev",
+      label: "Button Prev",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "button_next",
+      label: "Button Next",
+      field_interface: "ButtonWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        container: {
+          "max-width": "64rem",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-top": "7xl",
+          "padding-bottom": "7xl",
+          "padding-left": "base",
+          "padding-right": "base",
+          tablet: {
+            "padding-left": "3xl",
+            "padding-right": "3xl",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          "font-weight": "600",
+          color: "text-1",
+          "margin-bottom": "5xl",
+        },
+        testimonials: TESTIMONIALS_STYLES,
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        button_prev: {
+          button_icons: {
+            left: {
+              enabled: true,
+            },
+          },
+        },
+        button_next: {
+          button_icons: {
+            right: {
+              enabled: true,
+            },
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,128 @@
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Box,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { ITestimonial3Content } from "./testimonial-3.schema";
+
+const Testimonial3: React.FC<ILevoBlockBaseProps<ITestimonial3Content>> = ({
+  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]);
+
+  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">
+        <Heading elementKey="title" />
+        <Carousel
+          elementKey="testimonials_levoGroup"
+          className="w-full"
+          setApi={setApi}
+          data-levo_group
+        >
+          <CarouselContent>
+            {(content?.testimonials ?? [])?.map((_, index) => (
+              <CarouselItem key={index} className="flex w-full">
+                <Box
+                  elementKey={`testimonials.${index}.testimonial_wrapper`}
+                  data-levo_group_item
+                >
+                  <Box elementKey={`testimonials.${index}.testimonial_content`}>
+                    <Box elementKey={`testimonials.${index}.author_box`}>
+                      <Typography
+                        elementKey={`testimonials.${index}.author_name`}
+                      />
+                      <Typography
+                        elementKey={`testimonials.${index}.author_role`}
+                      />
+                    </Box>
+                    <Typography
+                      elementKey={`testimonials.${index}.testimonial_text`}
+                    />
+                    <Box
+                      elementKey={`testimonials.${index}.testimonial_controls`}
+                    >
+                      <Button
+                        elementKey="button_prev"
+                        onClick={handlePrevious}
+                        disabled={isFirstSlide}
+                        style={{
+                          opacity: isFirstSlide ? 0.5 : 1,
+                          cursor: isFirstSlide ? "not-allowed" : "pointer",
+                        }}
+                      >
+                        {/* <Image alt="previous-icon" elementKey="button_prev_icon" /> */}
+                      </Button>
+                      <Button
+                        elementKey="button_next"
+                        onClick={handleNext}
+                        disabled={isLastSlide}
+                        style={{
+                          opacity: isLastSlide ? 0.5 : 1,
+                          cursor: isLastSlide ? "not-allowed" : "pointer",
+                        }}
+                      >
+                        {/* <Image alt="next-icon" elementKey="button_next_icon" /> */}
+                      </Button>
+                    </Box>
+                  </Box>
+                  <Box elementKey={`testimonials.${index}.image_box`}>
+                    <Image
+                      elementKey={`testimonials.${index}.client_image`}
+                      width={288}
+                      height={288}
+                      alt="Client"
+                    />
+                  </Box>
+                </Box>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </Container>
+    </Section>
+  );
+};
+
+export default Testimonial3;