@levo-so/blocks 0.1.1 → 0.1.2

package/src/blocks/event/event-details.tsx

@@ -0,0 +1,107 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import dayjs from "dayjs";
+
+import type { IEventDetailsContent } from "./event-details.schema";
+
+const EventDetails: React.FC<ILevoBlockBaseProps<IEventDetailsContent>> = ({
+  content,
+}) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="main-wrapper">
+          <Box elementKey="hero-card">
+            <Image
+              elementKey="hero-image"
+              alt="Event cover image"
+              width={800}
+              height={400}
+            />
+            <Box elementKey="hero-content">
+              <Heading elementKey="title" />
+              <Box elementKey="event-info">
+                <Box elementKey="start-date-wrapper">
+                  <Icon elementKey="date-icon" />
+                  <Typography elementKey="starts_at">
+                    {dayjs(content?.starts_at).format("MMM D, YYYY")}
+                  </Typography>
+                </Box>
+                <Box elementKey="end-date-wrapper">
+                  <Icon elementKey="end-date-icon" />
+                  <Typography elementKey="ends_at">
+                    {dayjs(content?.ends_at).format("MMM D, YYYY")}
+                  </Typography>
+                </Box>
+                <Box elementKey="time-wrapper">
+                  <Icon elementKey="time-icon" />
+                  <Typography elementKey="time-range">
+                    {`${dayjs(content?.starts_at).format("hh:mm A")} - ${dayjs(content?.ends_at).format("hh:mm A")}`}
+                  </Typography>
+                </Box>
+                <Box elementKey="kind-wrapper">
+                  <Icon elementKey="kind-icon" />
+                  <Typography elementKey="kind">
+                    {content?.kind?.replace(/_/g, " ")}
+                  </Typography>
+                </Box>
+                <Box elementKey="timing-wrapper">
+                  <Icon elementKey="timing-icon" />
+                  <Typography elementKey="timing">
+                    {content?.timing?.replace(/_/g, " ")}
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+
+          <Box elementKey="content-section">
+            <Box elementKey="main-content">
+              {(
+                content?.ends_at
+                  ? new Date(content?.ends_at) > new Date()
+                  : true
+              ) ? (
+                <Button elementKey="register-button" />
+              ) : (
+                <Typography elementKey="registration-ended" />
+              )}
+              <Typography elementKey="description" />
+            </Box>
+
+            <Box elementKey="contact-sidebar">
+              <Box elementKey="contact-card">
+                <Heading elementKey="contact-title" />
+                <Box elementKey="contact-details">
+                  <Box elementKey="name-field">
+                    <Typography elementKey="name-label" />
+                    <Typography elementKey="name-value" />
+                  </Box>
+                  <Box elementKey="email-field">
+                    <Typography elementKey="email-label" />
+                    <Typography elementKey="email-value" />
+                  </Box>
+                  <Box elementKey="phone-field">
+                    <Typography elementKey="phone-label" />
+                    <Typography elementKey="phone-value" />
+                  </Box>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default EventDetails;

package/src/blocks/event/event-listing-2.schema.ts

@@ -0,0 +1,496 @@
+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://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm.png",
+        srcset: {
+          "1080w":
+            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp",
+          "1200w":
+            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp",
+          "1920w":
+            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp",
+          "320w":
+            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp",
+          "640w":
+            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp",
+          "750w":
+            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp",
+          "828w":
+            "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp",
+          path: "https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp 750w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp 828w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp 1080w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp 1200w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp 1920w, https://space.levo.in.net/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp 320w, https://space.levo.in.net/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",
+        },
+      ],
+    },
+  ],
+};
+
+export type IEventListing2Content = typeof DEFAULT_CONTENT;
+
+export const EventListing2: IBlock = {
+  category_id: "event",
+  title: "Event Listing 2",
+  key: "event-listing-2",
+  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,
+      },
+    },
+  ],
+  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: {
+          "font-size": "4xl",
+          "font-weight": "700",
+          color: "text-1",
+          mobile: {
+            "font-size": "3xl",
+          },
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-2",
+          "max-width": "600px",
+          "line-height": "1.6",
+        },
+        "cta-button": {
+          "background-color": "background-1",
+          color: "text-1",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "border-radius": "lg",
+          "font-weight": "500",
+          "border-color": "border",
+        },
+        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",
+        },
+        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: {},
+    },
+  ],
+};

package/src/blocks/event/event-listing-2.tsx

@@ -0,0 +1,70 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Section,
+  Container,
+  Typography,
+  Heading,
+  Box,
+  Icon,
+  Image,
+  Button,
+} from "@levo-so/studio";
+
+import type { IEventListing2Content } from "./event-listing-2.schema";
+
+const EventListing2: React.FC<ILevoBlockBaseProps<IEventListing2Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header-section">
+        <Box elementKey="header-content">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Button elementKey="cta-button" />
+      </Box>
+
+      <Box elementKey="events_levoGroup" data-levo_group>
+        {(content.events ?? []).map((_: any, index: number) => (
+          <Box
+            key={`event-${index}`}
+            data-levo_group_item
+            elementKey={`events.${index}.eventWrapper`}
+          >
+            <Image elementKey={`events.${index}.image`} alt="Event image" />
+
+            <Box elementKey={`events.${index}.content-wrapper`}>
+              <Heading elementKey={`events.${index}.title`} />
+              <Typography elementKey={`events.${index}.description`} />
+
+              <Box
+                elementKey={`events.${index}.details_levoGroup`}
+                data-levo_group
+              >
+                {(content.events?.[index]?.details ?? []).map(
+                  (_: any, detailIndex: number) => (
+                    <Box
+                      key={`detail-${detailIndex}`}
+                      data-levo_group_item
+                      elementKey={`events.${index}.details.${detailIndex}.detailWrapper`}
+                    >
+                      <Icon
+                        elementKey={`events.${index}.details.${detailIndex}.icon`}
+                      />
+                      <Typography
+                        elementKey={`events.${index}.details.${detailIndex}.text`}
+                      />
+                    </Box>
+                  ),
+                )}
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default EventListing2;