@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,48 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IFeatures1Content } from "./features-1.schema";
+
+const Features1: React.FC<ILevoBlockBaseProps<IFeatures1Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="text_wrapper">
+        <Typography elementKey="label" />
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+      </Box>
+
+      <Box elementKey="specialties_levoGroup" data-levo_group>
+        {(content.specialties ?? []).map((_, index) => (
+          <Box
+            elementKey={`specialties.${index}.content_wrapper`}
+            key={`features-1-feature-${index}`}
+            data-levo_group_item
+          >
+            <Box elementKey={`specialties.${index}.icon_wrapper`}>
+              <Icon elementKey={`specialties.${index}.icon`} />
+            </Box>
+            <Box elementKey={`specialties.${index}.text_wrapper`}>
+              <Heading elementKey={`specialties.${index}.title`} />
+              <Typography elementKey={`specialties.${index}.description`} />
+              <Typography elementKey={`specialties.${index}.caption`} />
+              <Button elementKey={`specialties.${index}.cta`} />
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Features1;

package/src/blocks/features/features-1/variants/default.ts

@@ -0,0 +1,197 @@
+import type { IBlockLayouts } from "@levo-so/studio";
+
+export 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>',
+  },
+};
+
+export const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  text_wrapper: null,
+  title: "Our Healthcare Specialties",
+  description:
+    "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam.",
+  specialties: [
+    {
+      content_wrapper: null,
+      text_wrapper: null,
+      icon_wrapper: null,
+      title: "Dental Care",
+      description:
+        "Elevate your smile with holistic dental care, promoting oral health and confidence.",
+      caption: " ",
+      icon: DUMMY_ICON,
+      cta: "Donate Now",
+    },
+    {
+      content_wrapper: null,
+      text_wrapper: null,
+      icon_wrapper: null,
+      title: "Pulmonology",
+      description:
+        "Specialized pulmonology care for optimal respiratory health and well-being.",
+      caption: " ",
+      icon: DUMMY_ICON,
+      cta: "Donate Now",
+    },
+    {
+      content_wrapper: null,
+      text_wrapper: null,
+      icon_wrapper: null,
+      title: "Hematology",
+      description:
+        "Specialized pulmonology care for optimal respiratory health and well-being.",
+      caption: " ",
+      icon: DUMMY_ICON,
+      cta: "Donate Now",
+    },
+    {
+      content_wrapper: null,
+      text_wrapper: null,
+      icon_wrapper: null,
+      title: "Infection",
+      description:
+        "Expert care for infections, ensuring swift diagnosis and effective treatment.",
+      caption: " ",
+      icon: DUMMY_ICON,
+      cta: "Donate Now",
+    },
+    {
+      content_wrapper: null,
+      text_wrapper: null,
+      icon_wrapper: null,
+      title: "Dialysis",
+      description:
+        "Comprehensive dialysis services, providing vital kidney care for a healthier life.",
+      caption: " ",
+      icon: DUMMY_ICON,
+      cta: "Donate Now",
+    },
+    {
+      content_wrapper: null,
+      text_wrapper: null,
+      icon_wrapper: null,
+      title: "Generalist",
+      description:
+        "Generalist doctors addressing common health concerns with personalized care.",
+      caption: " ",
+      icon: DUMMY_ICON,
+      cta: "Donate Now",
+    },
+  ],
+};
+
+export const defaultFeatures1Variant: IBlockLayouts = {
+  key: "default",
+  title: "Default",
+  styles: {
+    layout: {
+      display: "flex",
+      width: "100%",
+      padding: "80px 112px",
+      "flex-direction": "column",
+      "align-items": "center",
+      tablet: {
+        padding: "60px 60px",
+      },
+      mobile: {
+        padding: "40px",
+      },
+    },
+    container: {
+      display: "flex",
+      width: "100%",
+      "flex-direction": "column",
+      "align-items": "center",
+      "row-gap": "8xl",
+      mobile: {
+        "row-gap": "5xl",
+      },
+    },
+    text_wrapper: {
+      display: "flex",
+      "flex-direction": "column",
+      "row-gap": "lg",
+      mobile: {
+        "row-gap": "sm",
+      },
+    },
+    label: {
+      "text-align": "center",
+    },
+    title: {
+      "text-align": "center",
+      "font-size": "4xl",
+      "font-weight": "bold",
+    },
+    description: {
+      "max-width": "672px",
+      "text-align": "center",
+    },
+    specialties_levoGroup: {
+      display: "grid",
+      width: "100%",
+      "grid-template-columns": "repeat(3, 1fr)",
+      "row-gap": "2xl",
+      "column-gap": "2xl",
+      tablet: {
+        "grid-template-columns": "repeat(2, 1fr)",
+      },
+      mobile: {
+        "grid-template-columns": "repeat(1, 1fr)",
+        "row-gap": "lg",
+      },
+    },
+    specialties: Array(6)
+      .fill(0)
+      .map((v) => {
+        return {
+          content_wrapper: {
+            "border-radius": "xl",
+            "border-width": "1px",
+            "border-style": "solid",
+            "border-color": "var(--color-border)",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "lg",
+            padding: "2xl",
+          },
+          icon_wrapper: {
+            display: "flex",
+            "justify-content": "center",
+            "align-items": "center",
+          },
+          icon: {
+            height: "16",
+            width: "16",
+            "border-radius": "none",
+            "background-color": "brandSecondary",
+          },
+          text_wrapper: {
+            display: "flex",
+            width: "100%",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "sm",
+          },
+          title: {
+            "font-size": "2xl",
+            "font-weight": "bold",
+          },
+          description: {
+            "text-align": "center",
+            "max-width": "266px",
+          },
+        };
+      }),
+  },
+  content: DEFAULT_CONTENT,
+  config: {},
+};

package/{dist/blocks/features/features-1/variants/index.js → src/blocks/features/features-1/variants/index.ts}

@@ -1,4 +1,10 @@
 import { stylizedCardsV1Features1Variant } from "./stylized-cards-v1";
 import { stylizedCardsV2Features1Variant } from "./stylized-cards-v2";
 import { defaultFeatures1Variant, DEFAULT_CONTENT } from "./default";
-export { stylizedCardsV1Features1Variant, stylizedCardsV2Features1Variant, defaultFeatures1Variant, DEFAULT_CONTENT, };
+
+export {
+  stylizedCardsV1Features1Variant,
+  stylizedCardsV2Features1Variant,
+  defaultFeatures1Variant,
+  DEFAULT_CONTENT,
+};

package/src/blocks/features/features-1/variants/stylized-cards-v1.ts

@@ -0,0 +1,138 @@
+import type { IBlockLayouts } from "@levo-so/studio";
+
+import { DEFAULT_CONTENT, DUMMY_ICON } from "./default";
+
+const DEFAULT_CONTENT_FOR_STYLIZED_CARDS = {
+  ...DEFAULT_CONTENT,
+  specialties: [
+    ...DEFAULT_CONTENT.specialties,
+    {
+      content_wrapper: null,
+      text_wrapper: null,
+      icon_wrapper: null,
+      title: "Orthopedics",
+      description:
+        "Specialized orthopedic care for musculoskeletal health and mobility with complimentary benefits.",
+      caption: " ",
+      icon: DUMMY_ICON,
+      cta: "Donate Now",
+    },
+    {
+      content_wrapper: null,
+      text_wrapper: null,
+      icon_wrapper: null,
+      title: "Pediatrics",
+      description:
+        "Specialized pediatrics care for children's health and development and they soar through sky.",
+      caption: " ",
+      icon: DUMMY_ICON,
+      cta: "Donate Now",
+    },
+  ],
+};
+
+export const stylizedCardsV1Features1Variant: IBlockLayouts = {
+  key: "stylized_cards_v1",
+  title: "Stylized Cards V1",
+  styles: {
+    layout: {
+      display: "flex",
+      width: "100%",
+      padding: "80px 112px",
+      "flex-direction": "column",
+      "align-items": "center",
+      "background-color": "brandSecondary",
+      tablet: {
+        padding: "60px 60px",
+      },
+      mobile: {
+        padding: "40px",
+      },
+    },
+    container: {
+      display: "flex",
+      width: "100%",
+      "flex-direction": "column",
+      "align-items": "center",
+      "row-gap": "8xl",
+      mobile: {
+        "row-gap": "5xl",
+      },
+    },
+    text_wrapper: {
+      display: "flex",
+      "flex-direction": "column",
+      "row-gap": "lg",
+      mobile: {
+        "row-gap": "sm",
+      },
+    },
+    title: {
+      "text-align": "center",
+      "font-size": "4xl",
+      "font-weight": "bold",
+    },
+    description: {
+      "max-width": "672px",
+      "text-align": "center",
+    },
+    specialties_levoGroup: {
+      display: "grid",
+      width: "100%",
+      "grid-template-columns": "repeat(4, 1fr)",
+      "row-gap": "lg",
+      "column-gap": "lg",
+      tablet: {
+        "grid-template-columns": "repeat(2, 1fr)",
+      },
+      mobile: {
+        "grid-template-columns": "repeat(1, 1fr)",
+        "row-gap": "lg",
+      },
+    },
+    specialties: Array(8)
+      .fill(0)
+      .map((v) => {
+        return {
+          content_wrapper: {
+            "border-radius": "xl",
+            "border-width": "1px",
+            "border-style": "solid",
+            "border-color": "var(--color-border)",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "base",
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "xl",
+            "padding-right": "xl",
+            "background-color": "white",
+            "box-shadow": "4px 4px 23px -3px rgba(0, 0, 0, 0.05)",
+          },
+          icon_wrapper: {
+            display: "flex",
+            "justify-content": "start",
+            "align-items": "center",
+          },
+          icon: {
+            height: "36px",
+            width: "36px",
+          },
+          text_wrapper: {
+            display: "flex",
+            width: "100%",
+            "flex-direction": "column",
+            "align-items": "start",
+            "row-gap": "xs",
+          },
+          title: {
+            "font-size": "2xl",
+            "font-weight": "bold",
+          },
+          description: {},
+        };
+      }),
+  },
+  content: DEFAULT_CONTENT_FOR_STYLIZED_CARDS,
+  config: {},
+};