@levo-so/blocks 0.1.1 → 0.1.52

package/src/blocks/blogs/blog-listing-2.tsx

@@ -0,0 +1,88 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Media,
+  Section,
+  Typography,
+  useContentEngine,
+} from "@levo-so/studio";
+
+import type { IBlogListing2Content } from "./blog-listing-2.schema";
+
+const BlogListing2: React.FC<
+  ILevoBlockBaseProps<IBlogListing2Content>
+> = () => {
+  const { data, query, setQuery, meta } = useContentEngine("blogs");
+
+  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-wrapper">
+          <Box elementKey="title-wrapper">
+            <Icon elementKey="header-icon" />
+            <Heading elementKey="header" />
+          </Box>
+          <Button elementKey="header-cta" />
+        </Box>
+        <Box elementKey="blogs_levoGroup" data-levo_group>
+          {(data || [])?.map((item: any, index: number) => (
+            <Box
+              key={`blogs.${index}`}
+              data-levo_group_item
+              elementKey={`blogs.${index}.blog`}
+            >
+              <Media elementKey={`blogs.${index}.media`} alt="Blog Media" />
+              <Box elementKey={`blogs.${index}.blog-info-wrapper`}>
+                <Box elementKey={`blogs.${index}.blog-content`}>
+                  <Box elementKey={`blogs.${index}.blog-header`}>
+                    <Icon elementKey={`blogs.${index}.header-icon`} />
+                    <Typography elementKey={`blogs.${index}.blog-type`} />
+                  </Box>
+                  <Heading elementKey={`blogs.${index}.title`} />
+                  <Typography elementKey={`blogs.${index}.description`} />
+                  <Box elementKey={`blogs.${index}.blog-footer`}>
+                    <Box elementKey={`blogs.${index}.blog-author`}>
+                      <Icon elementKey={`blogs.${index}.author-image`} />
+                      <Typography elementKey={`blogs.${index}.author-name`} />
+                    </Box>
+                    <Box
+                      elementKey={`blogs.${index}.blog-reading-time-wrapper`}
+                    >
+                      <Icon elementKey={`blogs.${index}.reading-time-icon`} />
+                      <Typography elementKey={`blogs.${index}.reading-time`} />
+                    </Box>
+                  </Box>
+                </Box>
+                <Button elementKey={`blogs.${index}.cta`} />
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Box elementKey="pagination-wrapper">
+          <Button
+            elementKey="pagination-left"
+            disabled={query?.page === 1}
+            onClick={handlePrevious}
+          />
+          <Typography elementKey="pagination-text">
+            {`${query?.page || 0}/${meta?.pages || 0}`}
+          </Typography>
+          <Button
+            elementKey="pagination-right"
+            onClick={handleNext}
+            disabled={query?.page === meta?.pages}
+          />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default BlogListing2;