@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,103 @@
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Typography,
+  Container,
+  Section,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Box,
+  Icon,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { ITeam3Content } from "./team-3.schema";
+
+const Team3: React.FC<ILevoBlockBaseProps<ITeam3Content>> = ({ 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">
+          <Heading elementKey="title" />
+        </Box>
+        <Carousel elementKey="team_levoGroup" setApi={setApi} data-levo_group>
+          <CarouselContent>
+            {(content?.team ?? [])?.map((_: any, index: number) => (
+              <CarouselItem key={index} data-levo_group_item>
+                <Box elementKey={`team.${index}.card`}>
+                  <Box elementKey={`team.${index}.info`}>
+                    <Box elementKey={`team.${index}.name-position-wrapper`}>
+                      <Heading elementKey={`team.${index}.name`} />
+                      <Typography elementKey={`team.${index}.position`} />
+                    </Box>
+                    <Box
+                      elementKey={`team.${index}.social_levoGroup`}
+                      data-levo_group
+                    >
+                      {(content?.team?.[index]?.social ?? [])?.map(
+                        (_: any, socialIndex: number) => (
+                          <Icon
+                            key={socialIndex}
+                            data-levo_group_item
+                            elementKey={`team.${index}.social.${socialIndex}.icon`}
+                          />
+                        ),
+                      )}
+                    </Box>
+                  </Box>
+                </Box>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        {count > 0 && (
+          <Box elementKey="carousel-navigation-container">
+            <Box elementKey="carousel-navigation">
+              {Array(count)
+                ?.fill(0)
+                ?.map((_, index) => (
+                  <Box
+                    key={index}
+                    elementKey="carousel-navigation-pill"
+                    style={
+                      index + 1 === current
+                        ? {
+                            backgroundColor: "var(--color-brand)",
+                          }
+                        : {}
+                    }
+                    onClick={() => {
+                      if (api) {
+                        api?.scrollTo(index);
+                      }
+                    }}
+                  />
+                ))}
+            </Box>
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Team3;

package/src/blocks/team/team-4.schema.ts

@@ -0,0 +1,551 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "linkedin",
+    label: "LinkedIn",
+    tags: ["social", "professional", "linkedin"],
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M20.4491 20.4498H16.8931V14.8798C16.8931 13.5518 16.8681 11.8438 15.0431 11.8438C13.1931 11.8438 12.9081 13.2918 12.9081 14.7838V20.4498H9.35312V8.99976H12.7651V10.5608H12.8151C13.2881 9.66176 14.4481 8.71076 16.1811 8.71076C19.7851 8.71076 20.4491 11.0828 20.4491 14.1658V20.4498ZM5.33912 7.43276C4.19312 7.43276 3.27112 6.50676 3.27112 5.36576C3.27112 4.22476 4.19312 3.29976 5.33912 3.29976C6.48012 3.29976 7.40612 4.22476 7.40612 5.36576C7.40612 6.50676 6.48012 7.43276 5.33912 7.43276ZM7.11812 20.4498H3.55812V8.99976H7.11812V20.4498ZM22.2231 0H1.77112C0.79212 0 0 0.77376 0 1.72876V22.2708C0 23.2258 0.79212 24 1.77112 24H22.2231C23.2081 24 24 23.2258 24 22.2708V1.72876C24 0.77376 23.2081 0 22.2231 0Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header: null,
+  title: "Our Trainers",
+  description:
+    "More Than Instructors — They're Mentors Who Push, Inspire, and Guide You Toward Your Strongest Self, One Session at a Time.",
+  team: [
+    {
+      card: null,
+      info: null,
+      "name-position-wrapper": null,
+      name: "Lisa Kudro",
+      position: "Senior Fitness Trainer",
+      social: [
+        {
+          icon: {
+            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="var(--color-icon-primary)"/>\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="var(--color-icon-primary)"/>\n</svg>',
+            },
+          },
+        },
+      ],
+    },
+    {
+      card: null,
+      info: null,
+      "name-position-wrapper": null,
+      name: "Lisa Kudro",
+      position: "Senior Fitness Trainer",
+      social: [
+        {
+          icon: {
+            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="var(--color-icon-primary)"/>\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="var(--color-icon-primary)"/>\n</svg>',
+            },
+          },
+        },
+      ],
+    },
+    {
+      card: null,
+      info: null,
+      "name-position-wrapper": null,
+      name: "Lisa Kudro",
+      position: "Senior Fitness Trainer",
+      social: [
+        {
+          icon: {
+            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="var(--color-icon-primary)"/>\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="var(--color-icon-primary)"/>\n</svg>',
+            },
+          },
+        },
+      ],
+    },
+  ],
+  cta_wrapper: null,
+  cta: "Explore All Trainers",
+};
+
+export type ITeam4Content = typeof DEFAULT_CONTENT;
+
+export const Team4: IBlock = {
+  category_id: "team",
+  title: "Team 4",
+  key: "team-4",
+  version: "v1",
+  prompt_description:
+    "Team grid showcasing team member profiles with background images, names, positions and social icons, featuring a header with title and description, and a call-to-action button below.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall layout structure for the team grid block, providing consistent spacing and alignment.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container providing padding and centering for the team section.",
+      },
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the section title and description, positioned above the team grid.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the team section. Use a clear, engaging title that introduces the team.",
+        min_characters: 8,
+        max_characters: 30,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Descriptive text explaining the team's role or mission. Keep it engaging and professional.",
+        min_characters: 50,
+        max_characters: 200,
+      },
+    },
+    {
+      key: "team",
+      label: "Team Members",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "card",
+          label: "Card Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Wrapper for each team member card, providing structure and spacing with background image.",
+          },
+        },
+        {
+          key: "info",
+          label: "Member Info",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for team member information including name, position, and social links.",
+          },
+        },
+        {
+          key: "name-position-wrapper",
+          label: "Name Position Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for name and position that allows flex styling and proper spacing.",
+          },
+        },
+        {
+          key: "name",
+          label: "Member Name",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Full name of the team member. Use professional, clear naming.",
+            min_characters: 8,
+            max_characters: 30,
+          },
+        },
+
+        {
+          key: "social",
+          label: "Social Links",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "icon",
+              label: "Social Icon",
+              field_interface: "IconWidget",
+              hint: {
+                prompt_description:
+                  "Social media platform icon, typically LinkedIn for professional teams. Can be any social media platform icon.",
+                orientation: "square",
+                size: "icon",
+                usecase: "icon",
+              },
+            },
+          ],
+          hint: {
+            prompt_description:
+              "Collection of social media icons for the team member, typically just LinkedIn.",
+            min_items: 1,
+            max_items: 3,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A grid of team member cards showcasing the team with professional photos and contact information.",
+        min_items: 3,
+        max_items: 12,
+      },
+    },
+    {
+      key: "cta_wrapper",
+      label: "CTA Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the call-to-action button, positioned below the team grid.",
+      },
+    },
+    {
+      key: "cta",
+      label: "CTA Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Call-to-action button to encourage further engagement with the team or company.",
+        min_characters: 10,
+        max_characters: 30,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      config: {},
+      content: DEFAULT_CONTENT,
+      styles: {
+        layout: {
+          "background-color": "white",
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          mobile: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+          },
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "xl",
+          "padding-right": "xl",
+        },
+        header: {
+          "margin-bottom": "3xl",
+          mobile: {
+            "margin-bottom": "2xl",
+          },
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "flex-direction": "row",
+          "column-gap": "none",
+          tablet: {
+            "flex-direction": "column",
+            "justify-content": "center",
+            "align-items": "center",
+          },
+        },
+        title: {
+          "font-size": "5xl",
+          "font-weight": "700",
+          color: "text-1",
+          "line-height": "1.2",
+          "margin-bottom": "base",
+          tablet: {
+            "font-size": "3xl",
+            "text-align": "center",
+          },
+          mobile: {
+            "font-size": "2xl",
+          },
+          width: "100%",
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-2",
+          "line-height": "1.6",
+          "max-width": "500px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "text-align": "left",
+        },
+        team_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          "column-gap": "xl",
+          "row-gap": "xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+            "column-gap": "lg",
+            "row-gap": "lg",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "column-gap": "base",
+            "row-gap": "base",
+          },
+        },
+        team: [
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              "border-radius": "lg",
+              padding: "lg",
+              "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+              "min-height": "500px",
+              position: "relative",
+              "background-image":
+                'url("https://static.levostg.online/W6OEVMW8/b11624c98327720d9dc0944e8387d5f489e034df-ImvUWBrtAnvCJ.jpg")',
+              "background-position": "center center",
+              "background-size": "cover",
+            },
+            info: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              "justify-content": "space-between",
+              width: "100%",
+              "margin-top": "auto",
+              "padding-top": "none",
+              "padding-bottom": "none",
+              "padding-left": "none",
+              "padding-right": "none",
+              "box-shadow": "none",
+            },
+            "name-position-wrapper": {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "4xs",
+            },
+            name: {
+              color: "white",
+            },
+            position: {
+              "font-size": "base",
+              color: "text-2",
+              "font-weight": "400",
+              display: "none",
+            },
+            social_levoGroup: {
+              display: "flex",
+              "justify-content": "center",
+              "column-gap": "xs",
+            },
+            social: [
+              {
+                icon: {
+                  width: "40px",
+                  height: "40px",
+                  "object-fit": "contain",
+                  "border-style": "solid",
+                  "border-width": "1px",
+                  "border-color": "brand",
+                  "border-radius": "full",
+                  "background-color": "white",
+                  display: "block",
+                  padding: "xs",
+                  "font-size": "40px",
+                },
+              },
+            ],
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              "border-radius": "lg",
+              padding: "lg",
+              "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+              position: "relative",
+              "background-image":
+                'url("https://static.levostg.online/W6OEVMW8/e9621883320f7fa54c0378a1cba5f64b0422b2a7-PzNFtMNcDk7Db.jpg")',
+              "background-position": "center center",
+              "background-size": "cover",
+              "min-height": "500px",
+            },
+            info: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              "justify-content": "space-between",
+              width: "100%",
+              "margin-top": "auto",
+              "padding-top": "none",
+              "padding-bottom": "none",
+              "padding-left": "none",
+              "padding-right": "none",
+              "box-shadow": "none",
+            },
+            "name-position-wrapper": {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "4xs",
+            },
+            name: {
+              color: "white",
+            },
+            position: {
+              "font-size": "base",
+              color: "text-2",
+              "font-weight": "400",
+              display: "none",
+            },
+            social_levoGroup: {
+              display: "flex",
+              "justify-content": "center",
+              "column-gap": "xs",
+            },
+            social: [
+              {
+                icon: {
+                  width: "40px",
+                  height: "40px",
+                  "object-fit": "contain",
+                  "border-style": "solid",
+                  "border-width": "1px",
+                  "border-color": "brand",
+                  "border-radius": "full",
+                  "background-color": "white",
+                  display: "block",
+                  padding: "xs",
+                  "font-size": "40px",
+                },
+              },
+            ],
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              "border-radius": "lg",
+              padding: "lg",
+              "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+              "min-height": "500px",
+              position: "relative",
+              "background-image":
+                'url("https://static.levostg.online/W6OEVMW8/d21a17ee9be592536fd98fce98365040238846bb-dO450wFkQdegn.jpg")',
+              "background-position": "center center",
+              "background-size": "cover",
+            },
+            info: {
+              display: "flex",
+              "flex-direction": "row",
+              "align-items": "center",
+              "justify-content": "space-between",
+              width: "100%",
+              "margin-top": "auto",
+              "padding-top": "none",
+              "padding-bottom": "none",
+              "padding-left": "none",
+              "padding-right": "none",
+              "box-shadow": "none",
+            },
+            "name-position-wrapper": {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "4xs",
+            },
+            name: {
+              color: "white",
+            },
+            position: {
+              "font-size": "base",
+              color: "text-2",
+              "font-weight": "400",
+              display: "none",
+            },
+            social_levoGroup: {
+              display: "flex",
+              "justify-content": "center",
+              "column-gap": "xs",
+            },
+            social: [
+              {
+                icon: {
+                  width: "40px",
+                  height: "40px",
+                  "object-fit": "contain",
+                  "border-style": "solid",
+                  "border-width": "1px",
+                  "border-color": "brand",
+                  "border-radius": "full",
+                  "background-color": "white",
+                  display: "block",
+                  padding: "xs",
+                  "font-size": "40px",
+                },
+              },
+            ],
+          },
+        ],
+        cta_wrapper: {
+          display: "flex",
+          "justify-content": "center",
+          "margin-top": "3xl",
+          mobile: {
+            "margin-top": "2xl",
+          },
+        },
+        cta: {
+          "background-color": "brand",
+          color: "white",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "border-radius": "lg",
+          "font-size": "base",
+          "font-weight": "600",
+          "border-style": "none",
+        },
+      },
+    },
+  ],
+};