@levo-so/blocks 0.1.81 → 0.1.83

package/src/blocks/cards/cards-19.tsx

@@ -0,0 +1,89 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+  useContentEngine,
+} from "@levo-so/studio";
+import dayjs from "dayjs";
+
+import { ClientOnly } from "../event/ClientOnly";
+import type { ICards19Content } from "./cards-19.schema";
+
+const Cards19: React.FC<ILevoBlockBaseProps<ICards19Content>> = () => {
+  const { data, query, setQuery, meta } = useContentEngine("events");
+
+  const handleNext = () => setQuery({ page: (query?.page || 1) + 1 });
+  const handlePrevious = () => setQuery({ page: (query?.page || 1) - 1 });
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header-container">
+          <Heading elementKey="title" />
+          <Button elementKey="cta-button" />
+        </Box>
+
+        <Box elementKey="events_levoGroup" data-levo_group>
+          {(data || [])?.map((item: any, index: number) => (
+            <Box
+              key={`events-listing-element-${index}`}
+              data-levo_group_item
+              elementKey={`events.${index}.eventWrapper`}
+            >
+              <Image
+                height={200}
+                width={360}
+                elementKey={`events.${index}.image`}
+                alt="event poster"
+              />
+              <Box elementKey={`events.${index}.text-wrapper`}>
+                <Box elementKey={`events.${index}.text-container`}>
+                  <Typography elementKey={`events.${index}.caption-text`} />
+
+                  <Box elementKey={`events.${index}.date-wrapper`}>
+                    <Icon elementKey={`events.${index}.date-icon`} />
+                    <Typography elementKey={`events.${index}.publishedAt-header`}>
+                      <ClientOnly>
+                        {dayjs(item?.["publishedAt-header"]).format("MMM D, YYYY")}
+                      </ClientOnly>
+                    </Typography>
+                  </Box>
+                </Box>
+
+                <Typography elementKey={`events.${index}.title`} />
+                <Typography elementKey={`events.${index}.description`} />
+                <Typography elementKey={`events.${index}.publishedAt`}>
+                  <ClientOnly>{dayjs(item?.publishedAt).format("MMM D, YYYY")}</ClientOnly>
+                </Typography>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Box elementKey="paginationWrapper">
+          <Button
+            elementKey="paginationLeftButton"
+            disabled={query?.page === 1}
+            onClick={handlePrevious}
+          />
+
+          <Typography elementKey="paginationText">
+            {`${query?.page || 1}/${meta?.pages || 0}`}
+          </Typography>
+          <Button
+            elementKey="paginationRightButton"
+            onClick={handleNext}
+            disabled={query?.page === meta?.pages}
+          />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Cards19;

package/src/blocks/cards/cards-20.schema.ts

@@ -0,0 +1,536 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-section": null,
+  title: "Events",
+  description:
+    "Stay updated on our upcoming community gatherings, workshops, and networking events!",
+  "cta-button": "View all",
+  events: [
+    {
+      eventWrapper: null,
+      image: {
+        id: "w9fEtJuVtBFgU",
+        filename: "image.png",
+        kind: "image",
+        location: "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm.png",
+        srcset: {
+          "1080w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp",
+          "1200w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp",
+          "1920w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp",
+          "320w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp",
+          "640w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp",
+          "750w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp",
+          "828w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp",
+          path: "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp 640w",
+        },
+        mimetype: "image/png",
+      },
+      "content-wrapper": null,
+      title: "Afghan American Inauguration",
+      description:
+        "Join us for this historic celebration of community leadership and cultural pride.",
+      details: [
+        {
+          detailWrapper: null,
+          icon: DUMMY_ICON,
+          text: "3:00 PM - 6:00 PM",
+        },
+        {
+          detailWrapper: null,
+          icon: DUMMY_ICON,
+          text: "2200 Harvard St, Sacramento, CA 95815",
+        },
+        {
+          detailWrapper: null,
+          icon: DUMMY_ICON,
+          text: "11 Apr",
+        },
+      ],
+    },
+    {
+      eventWrapper: null,
+      image: {
+        id: "7141014160938075687",
+        location: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+        kind: "image",
+        mimetype: "image/png",
+        srcset: {
+          "1080w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+          "1200w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+          "1920w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+          "320w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+          "640w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+          "750w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+          "828w": "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+          path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+        },
+      },
+      "content-wrapper": null,
+      title: "Community Health Workshop",
+      description: "Learn about wellness resources and health services available in our community.",
+      details: [
+        {
+          detailWrapper: null,
+          icon: DUMMY_ICON,
+          text: "10:00 AM - 2:00 PM",
+        },
+        {
+          detailWrapper: null,
+          icon: DUMMY_ICON,
+          text: "1500 Main St, Sacramento, CA 95814",
+        },
+        {
+          detailWrapper: null,
+          icon: DUMMY_ICON,
+          text: "25 Apr",
+        },
+      ],
+    },
+  ],
+  paginationWrapper: null,
+  paginationLeftButton: "Previous",
+  paginationText: "",
+  paginationRightButton: "Next",
+};
+
+export type ICards20Content = typeof DEFAULT_CONTENT;
+
+export const Cards20: IBlock = {
+  category_id: "cards",
+  title: "Cards 20",
+  key: "cards-20",
+  version: "v1",
+  prompt_description:
+    "Event listing with header section containing title, description and CTA button, followed by event cards with images and detailed information including time, location, and date with icons",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall structure and layout of the Event Listing 2 block. No content generation required.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Contains the whole Event Listing 2 section, providing spacing and alignment for visual consistency. No content generation required.",
+      },
+    },
+    {
+      key: "header-section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the header content including title, description, and CTA button. No content generation required.",
+      },
+    },
+    {
+      key: "header-content",
+      label: "Header Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Wrapper for the title and description to enable flex layout styling. No content generation required.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the events section. Should be clear and engaging, indicating the purpose of the section.",
+        min_characters: 5,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Supporting text that provides context about the events. Should be informative and encouraging.",
+        min_characters: 50,
+        max_characters: 150,
+      },
+    },
+    {
+      key: "cta-button",
+      label: "CTA Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Call-to-action button that encourages users to explore more events. Should be action-oriented.",
+        min_characters: 6,
+        max_characters: 15,
+      },
+    },
+    {
+      key: "events",
+      label: "Events",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "eventWrapper",
+          label: "Event Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image",
+          label: "Event Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Featured image for the event. Should be engaging and relevant to the event content.",
+            orientation: "landscape",
+            size: "medium",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "content-wrapper",
+          label: "Content Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "title",
+          label: "Event Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description: "Name of the event. Should be clear, descriptive, and engaging.",
+            min_characters: 15,
+            max_characters: 50,
+          },
+        },
+        {
+          key: "description",
+          label: "Event Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Brief description of the event, highlighting key benefits or features that would interest attendees.",
+            min_characters: 40,
+            max_characters: 120,
+          },
+        },
+        {
+          key: "details",
+          label: "Event Details",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "detailWrapper",
+              label: "Detail Wrapper",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "icon",
+              label: "Detail Icon",
+              field_interface: "ImageWidget",
+              hint: {
+                prompt_description:
+                  "Icon representing the type of detail (time, location, date). Should be simple and recognizable.",
+                orientation: "square",
+                size: "icon",
+                usecase: "icon",
+              },
+            },
+            {
+              key: "text",
+              label: "Detail Text",
+              field_interface: "TypographyWidget",
+              hint: {
+                prompt_description:
+                  "Detail information such as time, location, or date. Should be clear and specific.",
+                min_characters: 5,
+                max_characters: 50,
+              },
+            },
+          ],
+          hint: {
+            prompt_description:
+              "Collection of event details including time, location, and date with corresponding icons.",
+            min_items: 3,
+            max_items: 3,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Collection of events with images, titles, descriptions, and detailed information about time, location, and date.",
+        min_items: 3,
+        max_items: 6,
+      },
+    },
+    {
+      key: "paginationWrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container holding pagination controls (buttons and info) at the bottom of the event grid. Provides structure and alignment for pagination elements. No content generation required.",
+      },
+    },
+    {
+      key: "paginationLeftButton",
+      label: "Pagination Left Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Button for navigating to the previous page of events. Label should be clear and descriptive, such as 'Previous'.",
+        min_characters: 4,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "paginationInfo",
+      label: "Pagination Info",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays the current events page and total pages, e.g., '1/10'. Keep format concise and clear.",
+        min_characters: 3,
+        max_characters: 8,
+      },
+    },
+    {
+      key: "paginationText",
+      label: "Pagination Text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays the current events page and total pages, e.g., '1/10'. Keep format concise and clear.",
+        min_characters: 3,
+        max_characters: 8,
+      },
+    },
+    {
+      key: "paginationRightButton",
+      label: "Pagination Right Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Button for navigating to the next page of events. Label should be clear and descriptive, such as 'Next'.",
+        min_characters: 4,
+        max_characters: 12,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          filter: "none",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+          filter: "none",
+        },
+        "header-section": {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "text-align": "center",
+          "row-gap": "lg",
+          "margin-bottom": "xl",
+          filter: "none",
+          "justify-content": "space-between",
+          tablet: {
+            "flex-direction": "column",
+          },
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        "header-content": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "base",
+          "text-align": "left",
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-2",
+          "max-width": "600px",
+          "line-height": "1.6",
+        },
+
+        events_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "2xl",
+          "row-gap": "2xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+          filter: "none",
+        },
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+        events: Array(2)
+          ?.fill(0)
+          .map((v) => {
+            return {
+              eventWrapper: {
+                "background-color": "white",
+                "border-radius": "xl",
+                overflow: "hidden",
+                "box-shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+                display: "flex",
+                "flex-direction": "column",
+                filter: "none",
+                "padding-bottom": "none",
+                height: "min-content",
+              },
+              image: {
+                width: "100%",
+                height: "auto",
+                "object-fit": "cover",
+                filter: "none",
+                "min-height": "260px",
+              },
+              "content-wrapper": {
+                "padding-left": "xl",
+                "padding-right": "xl",
+                "padding-top": "lg",
+                "padding-bottom": "xl",
+                display: "flex",
+                "flex-direction": "column",
+                "row-gap": "base",
+                filter: "none",
+                "background-color": "white",
+              },
+              title: {
+                "font-size": "xl",
+                "font-weight": "600",
+                color: "text-1",
+                "line-height": "1.3",
+                filter: "none",
+              },
+              description: {
+                "font-size": "base",
+                color: "text-2",
+                "line-height": "1.5",
+                "margin-bottom": "sm",
+                filter: "none",
+                display: "none",
+              },
+              details_levoGroup: {
+                display: "flex",
+                "flex-direction": "column",
+                "row-gap": "xs",
+                filter: "none",
+              },
+              details: [
+                {
+                  detailWrapper: {
+                    display: "flex",
+                    "align-items": "center",
+                    "column-gap": "sm",
+                    filter: "none",
+                  },
+                  icon: {
+                    width: "22px",
+                    height: "22px",
+                    "flex-shrink": "0",
+                    filter: "none",
+                  },
+                  text: {
+                    "font-size": "sm",
+                    color: "text-2",
+                    "line-height": "1.4",
+                  },
+                },
+                {
+                  icon: {
+                    filter: "none",
+                    width: "22px",
+                    height: "22px",
+                  },
+                  detailWrapper: {
+                    filter: "none",
+                    display: "flex",
+                    "column-gap": "sm",
+                  },
+                  text: {
+                    filter: "none",
+                  },
+                },
+                {
+                  icon: {
+                    filter: "none",
+                    height: "22px",
+                    width: "22px",
+                  },
+                  detailWrapper: {
+                    filter: "none",
+                    display: "flex",
+                    "column-gap": "sm",
+                  },
+                },
+              ],
+            };
+          }),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
+  ],
+};