@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,90 @@
+import dayjs from "dayjs";
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Section,
+  Container,
+  Typography,
+  Heading,
+  Box,
+  Icon,
+  Image,
+  useContentEngine,
+  Button,
+} from "@levo-so/studio";
+
+import type { IEventListing3 } from "./event-listing-3.schema";
+
+const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
+  const { data, query, setQuery, meta } = useContentEngine("events");
+
+  const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
+  const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header-container">
+          <Heading elementKey="title" />
+          <Button elementKey="cta-button" />
+        </Box>
+
+        <Box elementKey="events_levoGroup" data-levo_group>
+          {(data || [])?.map((item: any, index: number) => (
+            <Box
+              key={`events-listing-element-${index}`}
+              data-levo_group_item
+              elementKey={`events.${index}.eventWrapper`}
+            >
+              <Image elementKey={`events.${index}.image`} alt="event poster" />
+              <Box elementKey={`events.${index}.text-wrapper`}>
+                <Box elementKey={`events.${index}.text-container`}>
+                  <Box elementKey={`events.${index}.date-wrapper`}>
+                    <Icon elementKey={`events.${index}.date-icon`} />
+                    <Typography
+                      elementKey={`events.${index}.publishedAt-header`}
+                    >
+                      {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                    </Typography>
+                  </Box>
+
+                  <Box elementKey={`events.${index}.author-wrapper`}>
+                    <Icon elementKey={`events.${index}.author-image`} />
+                    <Typography elementKey={`events.${index}.author-name`} />
+                  </Box>
+                </Box>
+
+                <Box elementKey={`events.${index}.content-container`}>
+                  <Typography elementKey={`events.${index}.title`} />
+                  <Typography elementKey={`events.${index}.description`} />
+                  <Typography elementKey={`events.${index}.publishedAt`}>
+                    {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                  </Typography>
+
+                  <Button elementKey={`events.${index}.cta`} />
+                </Box>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Box elementKey="paginationWrapper">
+          <Button
+            elementKey="paginationLeftButton"
+            disabled={query?.page === 1}
+            onClick={handlePrevious}
+          />
+
+          <Typography elementKey="paginationText">
+            {`${query?.page || 0}/${meta?.pages || 0}`}
+          </Typography>
+          <Button
+            elementKey="paginationRightButton"
+            onClick={handleNext}
+            disabled={query?.page === meta?.pages}
+          />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default EventListing3;