@levo-so/blocks 0.1.54 → 0.1.59

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

@@ -0,0 +1,145 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  Heading,
+  Section,
+  Typography,
+  useContentEngine,
+  Calendar,
+} from "@levo-so/studio";
+import dayjs from "dayjs";
+import { useState } from "react";
+
+import type { ICalendar1Content } from "./calendar-1.schema";
+
+const EventCard: React.FC<{
+  event: ICalendar1Content["listing_section"][number];
+  index: number;
+}> = ({ event, index }) => {
+  const isEndDateValid = !!(
+    dayjs(event?.event_ends_date).isValid() &&
+    dayjs(event?.event_ends_month).isValid()
+  );
+
+  return (
+    <Box elementKey={`listing_section.${index}.event`}>
+      <Box elementKey={`listing_section.${index}.event_timing`}>
+        <Box elementKey={`listing_section.${index}.event_starts`}>
+          <Heading elementKey={`listing_section.${index}.event_starts_date`}>
+            {dayjs(event?.event_starts_date).format("DD")}
+          </Heading>
+          <Typography
+            elementKey={`listing_section.${index}.event_starts_month`}
+          >
+            {dayjs(event?.event_starts_date).format("MMMM")}
+          </Typography>
+        </Box>
+        {isEndDateValid && (
+          <>
+            <Typography elementKey={`listing_section.${index}.event_to`} />
+            <Box elementKey={`listing_section.${index}.event_ends`}>
+              <Heading elementKey={`listing_section.${index}.event_ends_date`}>
+                {dayjs(event?.event_ends_date).format("DD")}
+              </Heading>
+              <Typography
+                elementKey={`listing_section.${index}.event_ends_month`}
+              >
+                {dayjs(event?.event_ends_month).format("MMMM")}
+              </Typography>
+            </Box>
+          </>
+        )}
+      </Box>
+      <Box elementKey={`listing_section.${index}.divider`} />
+      <Box elementKey={`listing_section.${index}.event_content`}>
+        <Heading elementKey={`listing_section.${index}.event_category`} />
+        <Box elementKey={`listing_section.${index}.event_sub_content`}>
+          <Heading elementKey={`listing_section.${index}.event_title`} />
+          <Typography
+            elementKey={`listing_section.${index}.event_description`}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = () => {
+  const { data, query, setQuery } = useContentEngine("listing_section");
+
+  const [calendarMonth, setCalendarMonth] = useState<Date>(new Date());
+
+  const dateList = data
+    ?.map((v: any) => v?.event_starts_date)
+    ?.filter((v: any) => dayjs(v)?.isValid())
+    ?.map((v: any) => new Date(v));
+
+  const handleMonthChange = (date: Date) => {
+    setCalendarMonth(date);
+    setQuery({
+      ...query,
+      limit: -1,
+      where: {
+        ...(query?.where ?? {}),
+        AND: [
+          {
+            starts_at: {
+              gte: dayjs(date).startOf("month").format(),
+            },
+          },
+          {
+            ends_at: {
+              lte: dayjs(date).endOf("month").format(),
+            },
+          },
+        ],
+      },
+    });
+  };
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="content">
+          <Box elementKey="listing_section_levoGroup" data-levo_group>
+            {(data ?? [])?.map((item: any, index: number) => {
+              return (
+                <EventCard
+                  key={`listing_section.${index}`}
+                  index={index}
+                  event={item}
+                />
+              );
+            })}
+          </Box>
+          <Box elementKey="calendar_section">
+            <Box elementKey="calendar_header">
+              <Heading elementKey="calendar_title" />
+              <Typography elementKey="calendar_description" />
+            </Box>
+            <Box elementKey="calendar">
+              <Calendar
+                selected={dateList}
+                onSelect={() => {
+                  return;
+                }}
+                mode="multiple"
+                month={calendarMonth}
+                onMonthChange={handleMonthChange}
+              />
+            </Box>
+            <Button elementKey="calendar_cta" />
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Calendar1;

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

@@ -46,6 +46,11 @@ const DEFAULT_CONTENT = {
       },
       description:
         "Scalable cloud solutions that grow with your business needs and ensure 99.9% uptime reliability.",
+      buttons: [
+        {
+          text: "Learn More",
+        },
+      ],
     },
     {
       card: null,
@@ -84,6 +89,11 @@ const DEFAULT_CONTENT = {
       },
       description:
         "Scalable cloud solutions that grow with your business needs and ensure 99.9% uptime reliability.",
+      buttons: [
+        {
+          text: "Learn More",
+        },
+      ],
     },
     {
       card: null,
@@ -122,6 +132,11 @@ const DEFAULT_CONTENT = {
       },
       description:
         "Scalable cloud solutions that grow with your business needs and ensure 99.9% uptime reliability.",
+      buttons: [
+        {
+          text: "Learn More",
+        },
+      ],
     },
   ],
 };
@@ -174,7 +189,7 @@ const CTA_DEFAULT_CONTENT = {
         mimetype: "image/png",
       },
       description:
-        "<p>Softype delivers full-cycle Oracle ERP implementation services designed to minimize disruption and maximize ROI.</p>",
+        "<p>Lorem Ipsum delivers full-cycle Oracle ERP implementation services designed to minimize disruption and maximize ROI.</p>",
     },
     {
       card: null,
@@ -216,7 +231,7 @@ const CTA_DEFAULT_CONTENT = {
         mimetype: "image/png",
       },
       description:
-        "<p>Softype delivers full-cycle Oracle ERP implementation services designed to minimize disruption and maximize ROI.</p>",
+        "<p>Lorem Ipsum delivers full-cycle Oracle ERP implementation services designed to minimize disruption and maximize ROI.</p>",
     },
     {
       card: null,
@@ -258,7 +273,7 @@ const CTA_DEFAULT_CONTENT = {
         mimetype: "image/png",
       },
       description:
-        "<p>Softype delivers full-cycle Oracle ERP implementation services designed to minimize disruption and maximize ROI.</p>",
+        "<p>Lorem Ipsum delivers full-cycle Oracle ERP implementation services designed to minimize disruption and maximize ROI.</p>",
     },
     {
       card: null,
@@ -300,7 +315,7 @@ const CTA_DEFAULT_CONTENT = {
         mimetype: "image/png",
       },
       description:
-        "<p>Softype delivers full-cycle Oracle ERP implementation services designed to minimize disruption and maximize ROI.</p>",
+        "<p>Lorem Ipsum delivers full-cycle Oracle ERP implementation services designed to minimize disruption and maximize ROI.</p>",
     },
   ],
   cta: "Explore All services",
@@ -386,6 +401,19 @@ export const Cards10: IBlock = {
           label: "Description",
           field_interface: "TypographyWidget",
         },
+        {
+          key: "buttons",
+          label: "Buttons",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "text",
+              label: "Button",
+              field_interface: "ButtonWidget",
+            },
+          ],
+        },
       ],
     },
   ],
@@ -431,6 +459,7 @@ export const Cards10: IBlock = {
           },
           "text-align": "left",
         },
+
         cards_grid: {
           width: "100%",
         },
@@ -485,6 +514,24 @@ export const Cards10: IBlock = {
           color: "text-2",
           "line-height": "1.6",
         },
+        "cards.$.buttons_levoGroup": {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "base",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "sm",
+          },
+        },
+        "cards.$.buttons": [
+          {
+            text: {
+              selectedVariants: {
+                Button_Variants: "Primary",
+              },
+            },
+          },
+        ],
         cards: [
           {
             header: {
@@ -654,6 +701,7 @@ export const Cards10: IBlock = {
           },
           "text-align": "left",
         },
+
         cards_grid: {
           width: "100%",
         },

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

@@ -25,7 +25,7 @@ const Cards10: React.FC<ILevoBlockBaseProps<ICards10Content>> = ({
       </Box>
       <Box elementKey="cards_grid">
         <Box elementKey="cards_levoGroup" data-levo_group>
-          {(content?.cards ?? []).map((_: any, index: number) => (
+          {(content?.cards ?? []).map((card: any, index: number) => (
             <Box
               key={`cards-10-card-${index}`}
               data-levo_group_item
@@ -37,6 +37,18 @@ const Cards10: React.FC<ILevoBlockBaseProps<ICards10Content>> = ({
               </Box>
               <Image elementKey={`cards.${index}.image`} alt="Card image" />
               <Typography elementKey={`cards.${index}.description`} />
+              <Box
+                elementKey={`cards.${index}.buttons_levoGroup`}
+                data-levo_group
+              >
+                {(card?.buttons ?? []).map((_: any, btnIndex: number) => (
+                  <Button
+                    key={btnIndex}
+                    data-levo_group_item
+                    elementKey={`cards.${index}.buttons.${btnIndex}.text`}
+                  />
+                ))}
+              </Box>
             </Box>
           ))}
         </Box>