@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,13 +1,14 @@
 import {
-  type ILevoBlockBaseProps,
   Box,
   Button,
+  Calendar,
   Container,
   Heading,
+  Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
   useContentEngine,
-  Calendar,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
 import { useState } from "react";
@@ -19,10 +20,17 @@ const EventCard: React.FC<{
   index: number;
 }> = ({ event, index }) => {
   const isEndDateValid = !!(
-    dayjs(event?.event_ends_date).isValid() &&
-    dayjs(event?.event_ends_month).isValid()
+    dayjs(event?.event_ends_date).isValid() && dayjs(event?.event_ends_month).isValid()
+  );
+
+  const isStartDateIsSameAsEndDate = dayjs(event?.event_starts_date).isSame(
+    event?.event_ends_date,
+    "day",
   );
 
+  const isStartTimeValid = dayjs(event?.starts_at).isValid();
+  const isEndTimeValid = dayjs(event?.ends_at).isValid();
+
   return (
     <Box elementKey={`listing_section.${index}.event`}>
       <Box elementKey={`listing_section.${index}.event_timing`}>
@@ -30,26 +38,36 @@ const EventCard: React.FC<{
           <Heading elementKey={`listing_section.${index}.event_starts_date`}>
             {dayjs(event?.event_starts_date).format("DD")}
           </Heading>
-          <Typography
-            elementKey={`listing_section.${index}.event_starts_month`}
-          >
+          <Typography elementKey={`listing_section.${index}.event_starts_month`}>
             {dayjs(event?.event_starts_date).format("MMMM")}
           </Typography>
         </Box>
-        {isEndDateValid && (
+        {isEndDateValid && !isStartDateIsSameAsEndDate ? (
           <>
             <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`}
-              >
+              <Typography elementKey={`listing_section.${index}.event_ends_month`}>
                 {dayjs(event?.event_ends_month).format("MMMM")}
               </Typography>
             </Box>
           </>
+        ) : (
+          <>
+            {isStartTimeValid && (
+              <Typography elementKey={`listing_section.${index}.starts_at`}>
+                {dayjs(event?.starts_at).format("hh:mm a")}
+              </Typography>
+            )}
+
+            {isEndTimeValid && (
+              <Typography elementKey={`listing_section.${index}.ends_at`}>
+                {dayjs(event?.ends_at).format("hh:mm a")}
+              </Typography>
+            )}
+          </>
         )}
       </Box>
       <Box elementKey={`listing_section.${index}.divider`} />
@@ -57,16 +75,14 @@ const EventCard: React.FC<{
         <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`}
-          />
+          <Typography elementKey={`listing_section.${index}.event_description`} />
         </Box>
       </Box>
     </Box>
   );
 };
 
-const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = () => {
+const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = ({ content }) => {
   const { data, query, setQuery } = useContentEngine("listing_section");
 
   const [calendarMonth, setCalendarMonth] = useState<Date>(new Date());
@@ -99,6 +115,14 @@ const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = () => {
     });
   };
 
+  const handleResetFilter = () => {
+    setQuery({
+      ...query,
+      limit: 20,
+      where: {},
+    });
+  };
+
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
@@ -108,15 +132,17 @@ const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = () => {
         </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}
-                />
-              );
-            })}
+            {data && data.length > 0 ? (
+              data?.map((item: any, index: number) => {
+                return <EventCard key={`listing_section.${index}`} index={index} event={item} />;
+              })
+            ) : (
+              <Box elementKey="empty_state">
+                <Icon elementKey="empty_state_icon" />
+                <Heading elementKey="empty_state_title" />
+                <Typography elementKey="empty_state_description" />
+              </Box>
+            )}
           </Box>
           <Box elementKey="calendar_section">
             <Box elementKey="calendar_header">
@@ -134,7 +160,16 @@ const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = () => {
                 onMonthChange={handleMonthChange}
               />
             </Box>
-            <Button elementKey="calendar_cta" />
+            <Box elementKey="calendar_ctas_levoGroup" data-levo_group>
+              {(content.calendar_ctas ?? []).map((_: any, index: number) => (
+                <Button
+                  key={`calendar_ctas.${index}.calendar_cta`}
+                  elementKey={`calendar_ctas.${index}.calendar_cta`}
+                  data-levo_group_item
+                />
+              ))}
+              <Button elementKey="empty_state_cta" onClick={handleResetFilter} />
+            </Box>
           </Box>
         </Box>
       </Container>