@levo-so/blocks 0.1.101 → 0.1.103

package/src/blocks/logos/logos-1.tsx

@@ -14,7 +14,10 @@ import {
 
 import type { ILogos1Content } from "./logos-1.schema";
 
-const Logos1: React.FC<ILevoBlockBaseProps<ILogos1Content>> = ({ content }) => {
+const Logos1: React.FC<ILevoBlockBaseProps<ILogos1Content>> = ({ content, config }) => {
+  const isCarousel = Boolean(config?.logos_levoGroup?.carousel);
+  const logos = content?.logos ?? [];
+
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
@@ -33,25 +36,35 @@ const Logos1: React.FC<ILevoBlockBaseProps<ILogos1Content>> = ({ content }) => {
             ))}
           </Box>
         </Box>
-        <Carousel
-          elementKey="logos_levoGroup"
-          data-levo_group
-          opts={{
-            watchDrag: false,
-            watchResize: true,
-            watchSlides: true,
-          }}
-        >
-          <CarouselContent className="items-center">
-            {(content?.logos ?? []).map((_, index) => (
-              <CarouselItem key={`logos-1-logo-${index}`} data-levo_group_item>
-                <Box elementKey={`logos.${index}.wrapper`}>
-                  <Image elementKey={`logos.${index}.logo`} alt="Logo" />
-                </Box>
-              </CarouselItem>
+        {isCarousel ? (
+          <Carousel
+            elementKey="logos_levoGroup"
+            data-levo_group
+            opts={{ watchDrag: false, watchResize: true, watchSlides: true }}
+          >
+            <CarouselContent className="items-center">
+              {logos.map((_, index) => (
+                <CarouselItem key={`logos-1-logo-${index}`} data-levo_group_item>
+                  <Box elementKey={`logos.${index}.wrapper`}>
+                    <Image elementKey={`logos.${index}.logo`} alt="Logo" />
+                  </Box>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        ) : (
+          <Box elementKey="logos_levoGroup" data-levo_group>
+            {logos.map((_, index) => (
+              <Box
+                key={`logos-1-logo-${index}`}
+                data-levo_group_item
+                elementKey={`logos.${index}.wrapper`}
+              >
+                <Image elementKey={`logos.${index}.logo`} alt="Logo" />
+              </Box>
             ))}
-          </CarouselContent>
-        </Carousel>
+          </Box>
+        )}
       </Container>
     </Section>
   );

package/src/blocks/logos/logos-2.schema.ts

@@ -0,0 +1,223 @@
+import type { IBlock } from "@levo-so/studio";
+
+const MEDIA_1 = {
+  id: "ZnMd6UkWEqMpG",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ.png",
+  mimetype: "image/png",
+  srcset: {
+    "320w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-828w.webp",
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1920w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/logos-1-1-WT0jirEuNwyiZ-320w.webp 320w",
+  },
+};
+
+const DEFAULT_LOGOS = [
+  { logo_wrapper: null, logo: MEDIA_1 },
+  { logo_wrapper: null, logo: MEDIA_1 },
+];
+
+const DEFAULT_CATEGORIES = [
+  {
+    category_wrapper: null,
+    category_title: "Co-presented by",
+    logos: DEFAULT_LOGOS,
+  },
+  {
+    category_wrapper: null,
+    category_title: "Payments Partner",
+    logos: [ { logo_wrapper: null, logo: MEDIA_1 } ],
+  },
+  {
+    category_wrapper: null,
+    category_title: "Government Ecosystem Partner",
+    logos: [ { logo_wrapper: null, logo: MEDIA_1 } ],
+  },
+];
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header: null,
+  title: "Partners",
+  subtitle: "Our trusted ecosystem of partners",
+  categories: DEFAULT_CATEGORIES,
+};
+
+export type ILogos2Content = typeof DEFAULT_CONTENT;
+
+export const Logos2: IBlock = {
+  category_id: "logos",
+  title: "Logos 2 (Grouped)",
+  key: "logos-2",
+  version: "v1",
+  prompt_description:
+    "A section with a main title and subtitle, followed by categories. Each category has its own title and a set of logos displayed in cards with white backgrounds and subtle shadows.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "subtitle",
+      label: "Subtitle",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "categories",
+      label: "Categories",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "category_wrapper",
+          label: "Category Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "category_title",
+          label: "Category Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "logos",
+          label: "Logos",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "logo_wrapper",
+              label: "Logo Wrapper",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "logo",
+              label: "Logo",
+              field_interface: "ImageWidget",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xl",
+        },
+        header: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "row-gap": "xs",
+        },
+        title: {
+          color: "brand",
+          "font-weight": 700,
+        },
+        subtitle: {
+          color: "text-2",
+          "font-size": "lg",
+        },
+        categories_levoGroup: {
+          display: "flex",
+          "flex-wrap": "wrap",
+          "justify-content": "center",
+          "column-gap": "4xl",
+          "row-gap": "4xl",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "center",
+          },
+        },
+        categories_levoGroupItem: {
+          category_wrapper: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "xl",
+          },
+          category_title: {
+            "font-weight": 600,
+            "font-size": "lg",
+            color: "text-1",
+          },
+          logos_levoGroup: {
+            display: "flex",
+            "flex-wrap": "wrap",
+            "justify-content": "center",
+            "column-gap": "xl",
+            "row-gap": "xl",
+          },
+          logos_levoGroupItem: {
+            logo_wrapper: {
+              "background-color": "background-1",
+              "border-radius": "xl",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "xl",
+              "padding-right": "xl",
+              "box-shadow": "default",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              width: "240px",
+              height: "120px",
+              mobile: {
+                width: "200px",
+                height: "100px",
+              },
+            },
+            logo: {
+              "max-height": "70px",
+              "max-width": "180px",
+              "object-fit": "contain",
+              mobile: {
+                "max-height": "50px",
+                "max-width": "140px",
+              },
+            },
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: { level: 1 },
+          selectedVariants: { Heading_Level: "H1" },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,55 @@
+import {
+  Box,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { ILogos2Content } from "./logos-2.schema";
+
+const Logos2: React.FC<ILevoBlockBaseProps<ILogos2Content>> = ({ content }) => {
+  const categories = content?.categories ?? [];
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="subtitle" />
+        </Box>
+
+        <Box elementKey="categories_levoGroup" data-levo_group>
+          {categories.map((category, catIndex) => (
+            <Box
+              key={`category-${catIndex}`}
+              elementKey={`categories.${catIndex}.category_wrapper`}
+              data-levo_group_item
+            >
+              <Typography elementKey={`categories.${catIndex}.category_title`} />
+              
+              <Box elementKey={`categories.${catIndex}.logos_levoGroup`} data-levo_group>
+                {(category.logos ?? []).map((_, logoIndex) => (
+                  <Box
+                    key={`logo-${catIndex}-${logoIndex}`}
+                    elementKey={`categories.${catIndex}.logos.${logoIndex}.logo_wrapper`}
+                    data-levo_group_item
+                  >
+                    <Image
+                      elementKey={`categories.${catIndex}.logos.${logoIndex}.logo`}
+                      alt="Partner Logo"
+                    />
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Logos2;