@levo-so/blocks 0.1.54 → 0.1.59

package/src/blocks/filter-listing/filter-listing-1.schema.ts

@@ -0,0 +1,614 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_wrapper: null,
+  header: "Popular this month",
+  filters_levoGroup: null,
+  pagination_wrapper: null,
+  pagination_left: "Previous",
+  pagination_text: "",
+  pagination_right: "Next",
+  listing_wrapper: null,
+  filters_accordion: null,
+  filters_accordion_item: null,
+  filters_accordion_trigger: null,
+  filters_accordion_title: "Filters",
+  filters_accordion_content: null,
+  filters_box: null,
+  listing: [
+    {
+      card: null,
+      media: {
+        object: "media",
+        id: "9GFLqRMjHAvm",
+        workspace_id: "WLZ1TXTD",
+        filename: "pexels-2147499152-29632553.jpg",
+        kind: "image",
+        path: "WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo.jpg",
+        location:
+          "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo.jpg",
+        metadata: {
+          etag: '"d2ab426d617eec426c1e6ba5605ab5d6"',
+          mimetype: "image/jpeg",
+          size: 2688667,
+        },
+        srcset: {
+          "1080w":
+            "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1080w.webp",
+          "1200w":
+            "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1200w.webp",
+          "1920w":
+            "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1920w.webp",
+          "320w":
+            "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-320w.webp",
+          "640w":
+            "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-640w.webp",
+          "750w":
+            "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-750w.webp",
+          "828w":
+            "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-828w.webp",
+          path: "https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1920w.webp 1920w, https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-320w.webp 320w, https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-640w.webp 640w, https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-750w.webp 750w, https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-828w.webp 828w, https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1080w.webp 1080w, https://static.levostg.online/WLZ1TXTD/pexels-2147499152-29632553-WT0prjeW1uuo-1200w.webp 1200w",
+        },
+        created_at: "2025-04-25T09:26:00.096Z",
+        updated_at: "2025-04-25T09:26:00.096Z",
+        created_by: null,
+        updated_by: null,
+      },
+      "filter_content-wrapper": null,
+      points: [
+        {
+          container: null,
+          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>',
+            },
+          },
+          text: "Senior Designer",
+        },
+      ],
+      filter_content: null,
+      title: "John Doe",
+      description:
+        "I wanted to visit Colombia’s sacred mountains. But there are some places we cannot go – and some things we cannot know.",
+      filter_footer: null,
+      experience_title: "Experience",
+      filter_experience: null,
+      experience_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>',
+        },
+      },
+      experience: "5+ Years",
+      filter_attendance_wrapper: null,
+      attendance_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>',
+        },
+      },
+      attendance: "1000+ Students",
+      filter_sessions: null,
+      session_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>',
+        },
+      },
+      session_text: "<p>18 Sessions</p>",
+      attendance_title: "<p>Attendace</p>",
+    },
+  ],
+};
+
+export type IFilterListing1Content = typeof DEFAULT_CONTENT;
+
+export const FilterListing1: IBlock = {
+  category_id: "filter-listing",
+  title: "Filter Listing 1",
+  key: "filter-listing-1",
+  version: "v1",
+  prompt_description:
+    "Three-column grid of news or filter cards, each with a large image, headline, summary text, and info row; section headline and a top-right “View all” button, plus pagination controls below.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_wrapper",
+      label: "Header Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Section heading introducing featured or trending filter articles for this month. Make it concise, bold, and inviting. Use a confident and energetic tone.",
+        min_characters: 16,
+        max_characters: 30,
+      },
+    },
+    {
+      key: "listing_wrapper",
+      label: "Listing Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "filters_accordion",
+      label: "Filters Accordion",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "filters_accordion_item",
+      label: "Filters Accordion Item",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "filters_accordion_trigger",
+      label: "Filters Accordion Trigger",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "filters_accordion_title",
+      label: "Filters Accordion Title",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Title for the collapsible filters section. Should be clear and indicate the purpose of the filters functionality.",
+        min_characters: 4,
+        max_characters: 16,
+      },
+    },
+    {
+      key: "filters_accordion_content",
+      label: "Filters Accordion Content",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "filters_box",
+      label: "Filters Box",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "listing",
+      label: "Listing",
+      kind: "group",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Repeating list of filter article cards displayed in a grid. Each card should showcase a featured filter post with image, headline, excerpt, type, author, and reading time. The content should be diverse, engaging, and visually consistent.",
+        min_items: 6, // 6 visible in grid at a time
+        max_items: 9, // allows for paginated dataset
+      },
+      options: {
+        supports_filters: true,
+      },
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "media",
+          label: "Media",
+          field_interface: "MediaWidget",
+          hint: {
+            prompt_description:
+              "Featured image for the filter post card, visually representing the article. Should be high-quality, visually engaging, and align with the filter's topic. Landscape orientation, fits the top portion of the card.",
+            orientation: "landscape",
+            size: "large",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "filter_info_wrapper",
+          label: "Filter Info Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "filter_content",
+          label: "Filter Content",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "points",
+          label: "Points",
+          kind: "group",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Repeatable group for points, allowing multiple roles or titles to be displayed alongside their respective icons.",
+            min_items: 1,
+            max_items: 3,
+          },
+          fields: [
+            {
+              key: "container",
+              label: "Container",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "icon",
+              label: "Icon",
+              field_interface: "IconWidget",
+              hint: {
+                prompt_description:
+                  "Small icon placed next to the designation, visually representing the role or position. Minimalistic style preferred.",
+                orientation: "square",
+                size: "icon",
+                usecase: "icon",
+              },
+            },
+            {
+              key: "text",
+              label: "Text",
+              field_interface: "TypographyWidget",
+              hint: {
+                prompt_description:
+                  "Professional designation or job title for the person, such as 'Senior Designer' or 'Lead Developer'. Keep it brief and professional.",
+                min_characters: 10,
+                max_characters: 30,
+              },
+            },
+          ],
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Headline for the filter post card, designed to attract attention and encourage clicks. Should be clear, engaging, and fit on 1 or 2 lines. Use an editorial, inviting tone.",
+            min_characters: 28,
+            max_characters: 60,
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Short excerpt or summary of the article, displayed on the card. It should generate curiosity and briefly explain the filter's theme or story in 1-2 concise sentences.",
+            min_characters: 60,
+            max_characters: 130,
+          },
+        },
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+    {
+      key: "pagination_wrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "pagination_left",
+      label: "Pagination Left",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the previous page of filter cards. Keep the label brief, such as 'Previous' or a left arrow. Tone should be neutral and functional.",
+        min_characters: 5,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination_text",
+      label: "Pagination text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays current and total page number in the paginator, e.g. '1/3' or 'Page 2 of 4'. Should be minimal, clear, and unambiguous.",
+        min_characters: 3,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination_right",
+      label: "Pagination Right",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the next page of filter cards. Should be concise, such as 'Next' or a right arrow. Neutral tone.",
+        min_characters: 4,
+        max_characters: 8,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          "padding-right": "8xl",
+          "padding-left": "8xl",
+          tablet: {
+            "padding-top": "5xl",
+            "padding-bottom": "5xl",
+            "padding-right": "5xl",
+            "padding-left": "5xl",
+          },
+          mobile: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-right": "2xl",
+            "padding-left": "2xl",
+          },
+        },
+        container: {
+          width: "100%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "7xl",
+          tablet: {
+            "row-gap": "3xl",
+          },
+          mobile: {
+            "row-gap": "4xl",
+          },
+        },
+        header_wrapper: {
+          display: "flex",
+          width: "full",
+          "align-items": "center",
+          "justify-content": "space-between",
+          mobile: {
+            "row-gap": "2xs",
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "justify-content": "flex-start",
+          },
+        },
+        header: {
+          flex: "1",
+        },
+        listing_wrapper: {
+          display: "flex",
+          "column-gap": "3xl",
+          "align-items": "flex-start",
+        },
+        filters_accordion: {
+          width: "280px",
+          "min-width": "280px",
+          tablet: {
+            width: "240px",
+            "min-width": "240px",
+          },
+          mobile: {
+            width: "100%",
+            "min-width": "auto",
+          },
+        },
+        filters_accordion_item: {
+          "border-color": "var(--color-border)",
+          "border-width": "1px",
+          "border-style": "solid",
+          "border-radius": "xl",
+          "background-color": "white",
+          "box-shadow": "lg",
+        },
+        filters_accordion_trigger: {
+          width: "100%",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          tablet: {
+            "padding-top": "md",
+            "padding-bottom": "md",
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+          mobile: {
+            "padding-top": "sm",
+            "padding-bottom": "sm",
+            "padding-left": "md",
+            "padding-right": "md",
+          },
+        },
+        filters_accordion_title: {
+          "font-size": "lg",
+          "font-weight": 600,
+          color: "text-1",
+        },
+        filters_accordion_content: {
+          "padding-top": "none",
+          "padding-bottom": "xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          tablet: {
+            "padding-bottom": "lg",
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+          mobile: {
+            "padding-bottom": "md",
+            "padding-left": "md",
+            "padding-right": "md",
+          },
+        },
+        filters_box: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        listing_levoGroup: {
+          display: "grid",
+          width: "full",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          "row-gap": "2xl",
+          "column-gap": "2xl",
+          flex: "1",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+            "row-gap": "xl",
+            "column-gap": "xl",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "row-gap": "2xl",
+          },
+        },
+        listing: [
+          {
+            card: {
+              display: "flex",
+              width: "full",
+              "flex-direction": "column",
+              "row-gap": "xl",
+              tablet: {
+                "row-gap": "md",
+              },
+            },
+            media: {
+              height: "240px",
+              width: "full",
+              "object-fit": "cover",
+            },
+            filter_info_wrapper: {
+              display: "flex",
+              width: "full",
+              "flex-direction": "column",
+              "row-gap": "base",
+              tablet: {
+                "row-gap": "xs",
+              },
+            },
+            filter_content: {
+              display: "flex",
+              width: "full",
+              "flex-direction": "column",
+              "row-gap": "xs",
+              tablet: {
+                "row-gap": "2xs",
+              },
+            },
+            points_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "2xs",
+            },
+            points: [
+              {
+                container: {
+                  display: "flex",
+                  width: "full",
+                  "align-items": "center",
+                  "column-gap": "xs",
+                  tablet: {
+                    "column-gap": "2xs",
+                  },
+                },
+                icon: {
+                  height: "22px",
+                  width: "22px",
+                  "object-fit": "contain",
+                  tablet: {
+                    height: "18px",
+                    width: "18px",
+                  },
+                  "font-size": "22px",
+                },
+                text: {
+                  "font-size": "lg",
+                },
+              },
+            ],
+            title: {
+              color: "text-1",
+            },
+            description: {
+              color: "text-2",
+            },
+
+            session_icon: {
+              height: "22px",
+              width: "22px",
+              "object-fit": "contain",
+              "font-size": "22px",
+            },
+            session_text: {
+              "font-size": "lg",
+              "font-weight": "normal",
+              color: "text-2",
+            },
+          },
+        ],
+        pagination_wrapper: {
+          display: "flex",
+          width: "full",
+          "justify-content": "center",
+          "align-items": "center",
+          "column-gap": "md",
+        },
+        pagination_left: {},
+        pagination_text: {},
+        pagination_right: {},
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        header: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        listing: [
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: 5,
+              },
+            },
+          },
+        ],
+      },
+    },
+  ],
+};