@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,250 @@
+import type { IBlock } from "@levo-so/studio";
+
+import type { DEFAULT_CONTENT } from "./testimonial-5/variants";
+import { defaultTestimonial5Variant } from "./testimonial-5/variants";
+import { testimonialWithRatings } from "./testimonial-5/variants/testimonialWithRatings";
+import { testimonialWithLogo } from "./testimonial-5/variants/testimonialWithLogo";
+
+export type ITestimonial5Content = typeof DEFAULT_CONTENT;
+
+export const Testimonial5: IBlock = {
+  category_id: "testimonial",
+  title: "Testimonial 5",
+  key: "testimonial-5",
+  version: "v1",
+  prompt_description:
+    "Card-based testimonial carousel with client photos, names, positions, and detailed quotes, featuring navigation dots for easy browsing through multiple testimonials.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall layout structure for the testimonial section block, providing proper spacing and alignment for the carousel and navigation elements.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container providing padding and width constraints for the testimonial section.",
+      },
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the section header including title and description text.",
+      },
+    },
+    {
+      key: "textWrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Groups the section title and description for proper spacing and alignment.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the testimonial section. Use a confident, trust-building headline that introduces client feedback.",
+        min_characters: 16,
+        max_characters: 50,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Subheading that explains the purpose of the testimonials and builds credibility. Use a professional, inviting tone.",
+        min_characters: 40,
+        max_characters: 150,
+      },
+    },
+    {
+      key: "carousel-navigation-container",
+      label: "Carousel Navigation Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the navigation dots, providing proper positioning below the carousel.",
+      },
+    },
+    {
+      key: "carousel-navigation",
+      label: "Carousel Navigation",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the navigation pills/dots that indicate current position and allow navigation between testimonials.",
+      },
+    },
+    {
+      key: "carousel-navigation-pill",
+      label: "Carousel Navigation Pill",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Individual navigation dot that shows current position and allows clicking to navigate to specific testimonial.",
+      },
+    },
+    {
+      key: "testimonials",
+      label: "Testimonials",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Main container for individual testimonial card with shadow and border styling.",
+          },
+        },
+        {
+          key: "stars_wrapper",
+          label: "Stars Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for the star rating display above the testimonial quote.",
+          },
+        },
+        {
+          key: "stars",
+          label: "Stars",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "star",
+              label: "Star",
+              field_interface: "IconWidget",
+              hint: {
+                prompt_description:
+                  "Individual star icon for rating display. Typically shows a filled star.",
+                usecase: "icon",
+                size: "small",
+              },
+            },
+          ],
+          hint: {
+            prompt_description:
+              "Collection of star icons representing the client's rating. Usually 5 stars for testimonials.",
+            min_items: 3,
+            max_items: 5,
+          },
+        },
+        {
+          key: "profileSection",
+          label: "Profile Section",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container grouping the client avatar and their information (name and position).",
+          },
+        },
+        {
+          key: "profileSection_content",
+          label: "Profile Section Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container grouping the client avatar and their information (name and position).",
+          },
+        },
+        {
+          key: "avatar",
+          label: "Avatar",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Professional headshot or avatar of the client providing the testimonial. Use professional, trustworthy imagery.",
+            orientation: "square",
+            size: "medium",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "clientInfo",
+          label: "Client Info",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for client name and position text, positioned next to the avatar.",
+          },
+        },
+        {
+          key: "name",
+          label: "Name",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Full name of the client giving the testimonial. Use realistic, professional-sounding names.",
+            min_characters: 8,
+            max_characters: 30,
+          },
+        },
+        {
+          key: "position",
+          label: "Position",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Professional title and company/department of the client. Use credible, industry-appropriate titles.",
+            min_characters: 15,
+            max_characters: 50,
+          },
+        },
+        {
+          key: "org_logo",
+          label: "Organization Logo",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Professional headshot or avatar of the client providing the testimonial. Use professional, trustworthy imagery.",
+            orientation: "square",
+            size: "medium",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "quote",
+          label: "Quote",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Detailed testimonial quote from the client. Write in first person with specific benefits and outcomes. Use an authentic, professional tone.",
+            min_characters: 150,
+            max_characters: 400,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Collection of detailed testimonial cards featuring client photos, names, positions, and comprehensive quotes about their experience. Focus on specific benefits and outcomes.",
+        min_items: 3,
+        max_items: 6,
+      },
+    },
+  ],
+  layouts: [
+    defaultTestimonial5Variant,
+    testimonialWithRatings,
+    testimonialWithLogo,
+  ],
+};

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

@@ -0,0 +1,130 @@
+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 { ITestimonial5Content } from "./testimonial-5.schema";
+
+const Testimonial5: React.FC<ILevoBlockBaseProps<ITestimonial5Content>> = ({
+  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="textWrapper">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+        </Box>
+
+        <Carousel
+          elementKey="testimonials_levoGroup"
+          className="w-full"
+          setApi={setApi}
+          data-levo_group
+        >
+          <CarouselContent>
+            {(content?.testimonials ?? []).map((_, index: number) => (
+              <CarouselItem key={index} data-levo_group_item>
+                <Box elementKey={`testimonials.${index}.card`}>
+                  {(content?.testimonials?.[index] as any)?.stars?.length >
+                    0 && (
+                    <Box elementKey={`testimonials.${index}.stars_wrapper`}>
+                      <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>
+                  )}
+                  <Typography elementKey={`testimonials.${index}.quote`} />
+                  <Box elementKey={`testimonials.${index}.profileSection`}>
+                    <Box
+                      elementKey={`testimonials.${index}.profileSection_content`}
+                    >
+                      <Icon elementKey={`testimonials.${index}.avatar`} />
+                      <Box elementKey={`testimonials.${index}.clientInfo`}>
+                        <Heading elementKey={`testimonials.${index}.name`} />
+                        <Typography
+                          elementKey={`testimonials.${index}.position`}
+                        />
+                      </Box>
+                    </Box>
+                    <Icon elementKey={`testimonials.${index}.org_logo`} />
+                  </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: "24px",
+                          }
+                        : {}
+                    }
+                    onClick={() => {
+                      if (api) {
+                        api?.scrollTo(index);
+                      }
+                    }}
+                  />
+                ))}
+            </Box>
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Testimonial5;