@levo-so/blocks 0.1.75 → 0.1.76

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

@@ -1,4 +1,8 @@
+import type { IModuleStudioConfig, IPost } from "@levo-so/core";
 import {
+  Avatar,
+  AvatarFallbackV2,
+  AvatarImageV2,
   Box,
   Button,
   Container,
@@ -8,67 +12,145 @@ import {
   Image,
   Section,
   Typography,
-  useContentEngine,
+  useBlockContext,
+  useContextEngine,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
 
+import { ClientOnly } from "../event/ClientOnly";
 import type { IBlogListing1Content } from "./blog-listing-1.schema";
 
+/** */
+interface IBlogMeta {
+  total: number;
+  pages: number;
+  blog?: {
+    studio_config?: IModuleStudioConfig[];
+  };
+}
+
 const BlogListing1: React.FC<ILevoBlockBaseProps<IBlogListing1Content>> = ({ content }) => {
-  const { data, query, setQuery, meta } = useContentEngine("blogs");
+  const { response, query, setQuery } = useContextEngine<IPost, IBlogMeta>("blogs");
+  const { isBuilder } = useBlockContext();
 
   const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
   const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
 
+  const studioConfig = response?.meta?.blog?.studio_config?.find((item) => !item.block_instance_id);
+
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
-        <Box elementKey="text_wrapper">
-          <Heading elementKey="title" />
-          <Typography elementKey="description" />
+        <Box elementKey="header">
+          <Box elementKey="text_wrapper">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+          <Box elementKey="ctas_levoGroup" data-levo_group>
+            {content?.ctas?.map((v, index) => {
+              return (
+                <Button
+                  elementKey={`ctas.${index}.cta`}
+                  key={`ctas.${index}.cta`}
+                  data-levo_group_item
+                />
+              );
+            })}
+          </Box>
         </Box>
         <Box elementKey="blogs_levoGroup" data-levo_group>
-          {data &&
-            Array.isArray(data) &&
-            data?.map((_, index) => {
-              return (
-                <Box data-levo_group_item key={index} elementKey={`blogs.${index}.blog`}>
-                  <Image
-                    alt="cover_image"
-                    elementKey={`blogs.${index}.cover_image`}
-                    width={256}
-                    height={184}
-                  />
-                  <Box elementKey={`blogs.${index}.blog_content_wrapper`}>
-                    <Box elementKey={`blogs.${index}.text_content_wrapper`}>
-                      <Box elementKey={`blogs.${index}.timestamp_wrapper`}>
-                        <Icon elementKey={`blogs.${index}.timestamp_icon`} />
-                        <Typography elementKey={`blogs.${index}.timestamp`}>
-                          {data?.[index]?.timestamp && dayjs(data?.[index]?.timestamp).isValid()
-                            ? dayjs(data?.[index]?.timestamp).format("DD MMM, YYYY")
-                            : " "}
-                        </Typography>
-                      </Box>
+          {response?.data?.map((item, index) => {
+            return (
+              <Box
+                data-levo_group_item
+                key={index}
+                elementKey={`blogs.${index}.blog`}
+                config={
+                  (isBuilder && studioConfig?.preview_url) || (!isBuilder && studioConfig?.live_url)
+                    ? {
+                        action: {
+                          type: "external_link",
+                          value:
+                            isBuilder && studioConfig.preview_url
+                              ? studioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
+                              : !isBuilder && studioConfig.live_url
+                                ? studioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
+                                : "",
+                          options: {},
+                        },
+                      }
+                    : {}
+                }
+              >
+                <Image
+                  alt="cover_image"
+                  elementKey={`blogs.${index}.cover_image`}
+                  image={item?.cover_image ?? undefined}
+                />
 
-                      <Box elementKey={`blogs.${index}.blog_info_wrapper`}>
-                        <Heading elementKey={`blogs.${index}.title`} />
-                        <Typography elementKey={`blogs.${index}.description`} />
-                      </Box>
-                      <Box elementKey={`blogs.${index}.author_wrapper`}>
-                        <Icon elementKey={`blogs.${index}.author_image`} />
-                        <Box elementKey={`blogs.${index}.author_info_wrapper`}>
-                          <Heading elementKey={`blogs.${index}.author_name`} />
-                          <Typography elementKey={`blogs.${index}.author_description`} />
+                <Box elementKey={`blogs.${index}.blog_content_wrapper`}>
+                  <Box elementKey={`blogs.${index}.text_content_wrapper`}>
+                    <Box elementKey={`blogs.${index}.content_header`}>
+                      {item?.published_at && dayjs(item?.published_at).isValid() && (
+                        <Box elementKey={`blogs.${index}.timestamp_wrapper`}>
+                          <Icon elementKey={`blogs.${index}.timestamp_icon`} />
+                          <ClientOnly>
+                            <Typography elementKey={`blogs.${index}.timestamp`}>
+                              {dayjs(item?.published_at).format("DD MMM, YYYY")}
+                            </Typography>
+                          </ClientOnly>
+                        </Box>
+                      )}
+                      {item?.categories?.at(0)?.name && (
+                        <Box elementKey={`blogs.${index}.category_wrapper`}>
+                          <Icon elementKey={`blogs.${index}.category_icon`} />
+                          <ClientOnly>
+                            <Typography elementKey={`blogs.${index}.category`}>
+                              {item?.categories?.at(0)?.name}
+                            </Typography>
+                          </ClientOnly>
                         </Box>
+                      )}
+                    </Box>
+
+                    <Box elementKey={`blogs.${index}.blog_info_wrapper`}>
+                      <Heading elementKey={`blogs.${index}.title`}>{item?.title}</Heading>
+                      <Typography elementKey={`blogs.${index}.description`}>
+                        {item?.summary}
+                      </Typography>
+                    </Box>
+                    <Box elementKey={`blogs.${index}.author_wrapper`}>
+                      <Avatar className="h-10 w-10">
+                        <AvatarImageV2 src={item?.authors?.[0]?.profile_picture?.location} />
+                        <AvatarFallbackV2>
+                          {[item?.authors?.[0]?.first_name, item?.authors?.[0]?.last_name]
+                            ?.map((v) => v?.[0])
+                            .filter(Boolean)
+                            .join("")
+                            .toUpperCase()}
+                        </AvatarFallbackV2>
+                      </Avatar>
+                      <Box elementKey={`blogs.${index}.author_info_wrapper`}>
+                        <Heading elementKey={`blogs.${index}.author_name`}>
+                          {item?.authors?.[0]
+                            ? [item.authors[0].first_name, item.authors[0].last_name]
+                                .filter(Boolean)
+                                .join(" ")
+                            : "Anonymous"}
+                        </Heading>
+                        <Typography elementKey={`blogs.${index}.author_description`}>
+                          {item?.authors?.[0]?.bio || "Author"}
+                        </Typography>
                       </Box>
                     </Box>
-                    <Button elementKey={`blogs.${index}.cta`} />
                   </Box>
+                  <Button elementKey={`blogs.${index}.cta`} />
                 </Box>
-              );
-            })}
+              </Box>
+            );
+          })}
         </Box>
-        {(meta?.pages || 0) > 1 && (
+        {response?.meta && (
           <Box elementKey="pagination-wrapper">
             <Button
               elementKey="pagination-left"
@@ -76,12 +158,12 @@ const BlogListing1: React.FC<ILevoBlockBaseProps<IBlogListing1Content>> = ({ con
               onClick={handlePrevious}
             />
             <Typography elementKey="pagination-text">
-              {`${query?.page || 0}/${meta?.pages || 0}`}
+              {`${query?.page || 0}/${response?.meta?.pages || 0}`}
             </Typography>
             <Button
               elementKey="pagination-right"
               onClick={handleNext}
-              disabled={query?.page === meta?.pages}
+              disabled={query?.page === response?.meta?.pages}
             />
           </Box>
         )}