@levo-so/blocks 0.1.100 → 0.1.102

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

@@ -2,6 +2,8 @@ import type { IModuleStudioConfig, IPost } from "@levo-so/core";
 import {
   Avatar,
   AvatarFallbackV2,
+  AvatarGroup,
+  AvatarGroupCount,
   AvatarImageV2,
   Box,
   Button,
@@ -9,6 +11,7 @@ import {
   Heading,
   Icon,
   type ILevoBlockBaseProps,
+  type IStudioSource,
   Media,
   Section,
   Typography,
@@ -24,11 +27,113 @@ import type { IBlogListing3Content } from "./blog-listing-3.schema";
 interface IBlogMeta {
   total: number;
   pages: number;
-  blog?: {
-    studio_config?: IModuleStudioConfig[];
-  };
+  studio_config?: (IModuleStudioConfig & {
+    module: IStudioSource["module"];
+  })[];
 }
 
+const getAuthorsText = (authors: any[]): string => {
+  const names = authors.map((a) => [a?.first_name].filter(Boolean).join(" ") || "Anonymous");
+
+  if (names.length === 2) return `${names[0]} and ${names[1]}`;
+  // if (names.length === 3) return `${names[0]}, ${names[1]}, and ${names[2]}`;
+
+  // 4+ authors: show first 3 names then remaining count
+  const remaining = names.length - 2;
+  return `${names[0]}, ${names[1]} and ${remaining} ${remaining === 1 ? "other" : "others"}`;
+};
+
+const AuthorRenderer: React.FC<{
+  index: number;
+  authors: any[];
+}> = ({ authors, index }) => {
+  if (authors?.length === 1) {
+    const authorNameArr = [authors?.[0]?.first_name, authors?.[0]?.last_name].filter(Boolean);
+
+    const authorName = authorNameArr.join(" ");
+
+    const authorNameFallback = authorNameArr
+      ?.map((v) => v?.[0])
+      .join("")
+      .toUpperCase();
+
+    return (
+      <Box elementKey={`blogs.${index}.blog-author`}>
+        <Avatar className="h-8 w-8">
+          <AvatarImageV2 src={authors?.[0]?.profile_picture?.location} />
+          <AvatarFallbackV2>{authorNameFallback}</AvatarFallbackV2>
+        </Avatar>
+        <Box elementKey={`blogs.${index}.author-info-wrapper`}>
+          <Typography elementKey={`blogs.${index}.author-name`}>
+            {authorName ? authorName : "Anonymous"}
+          </Typography>
+          {/* <Typography elementKey={`blogs.${index}.author-description`}>
+            {authors?.[0]?.username}
+          </Typography> */}
+        </Box>
+      </Box>
+    );
+  }
+
+  if (authors?.length > 1) {
+    const firstThreeAuthors = authors?.slice(0, 2);
+    const remainingAuthors = authors?.slice(2);
+
+    return (
+      <Box
+        elementKey={`blogs.${index}.blog-authors`}
+        style={{
+          display: "flex",
+          gap: "8px",
+          alignItems: "center",
+        }}
+      >
+        <AvatarGroup className="">
+          {firstThreeAuthors?.map((author, authorIndex) => {
+            const authorNameArr = [author?.first_name, author?.last_name].filter(Boolean);
+
+            const authorName = authorNameArr.join(" ");
+
+            const authorNameFallback = authorNameArr
+              ?.map((v) => v?.[0])
+              .join("")
+              .toUpperCase();
+
+            return (
+              <Avatar key={`blogs.${index}.blog-author.${authorIndex}`} className="h-8 w-8">
+                <AvatarImageV2
+                  src={author?.profile_picture?.location}
+                  className="object-cover"
+                  alt={authorName}
+                />
+                <AvatarFallbackV2>{authorNameFallback}</AvatarFallbackV2>
+              </Avatar>
+            );
+          })}
+          {remainingAuthors?.length > 0 && (
+            <AvatarGroupCount
+              className="h-8 w-8"
+              style={{
+                background: "var(--color-brand-secondary)",
+              }}
+            >
+              +{remainingAuthors?.length}
+            </AvatarGroupCount>
+          )}
+        </AvatarGroup>
+        <Typography
+          elementKey={`blogs.${index}.author-name`}
+          title={authors?.map((v) => v?.first_name)?.join(", ")}
+        >
+          {getAuthorsText(authors)}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return <Box elementKey={`blogs.${index}.blog-author`} />;
+};
+
 const BlogListing3: React.FC<ILevoBlockBaseProps<IBlogListing3Content>> = ({ content, config }) => {
   const { response, query, setQuery } = useContextEngine<IPost, IBlogMeta>("blogs");
   const { isStudio, blockData } = useBlockContext();
@@ -36,7 +141,9 @@ const BlogListing3: React.FC<ILevoBlockBaseProps<IBlogListing3Content>> = ({ con
   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);
+  const blogStudioConfig = response?.meta?.studio_config?.find(
+    (item) => !item.block_instance_id && item?.module === "blog",
+  );
   const fallbackConfig = (blockData as any)?.config?.blogs?.[0]?.blog?.action?.value;
 
   return (
@@ -63,15 +170,16 @@ const BlogListing3: React.FC<ILevoBlockBaseProps<IBlogListing3Content>> = ({ con
               data-levo_group_item
               elementKey={`blogs.${index}.blog`}
               config={
-                (isStudio && studioConfig?.preview_url) || (!isStudio && studioConfig?.live_url)
+                (isStudio && blogStudioConfig?.preview_url) ||
+                (!isStudio && blogStudioConfig?.live_url)
                   ? {
                       action: {
                         type: "external_link",
                         value:
-                          isStudio && studioConfig.preview_url
-                            ? studioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
-                            : !isStudio && studioConfig.live_url
-                              ? studioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
+                          isStudio && blogStudioConfig.preview_url
+                            ? blogStudioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
+                            : !isStudio && blogStudioConfig.live_url
+                              ? blogStudioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
                               : "",
                         options: {},
                       },
@@ -119,30 +227,7 @@ const BlogListing3: React.FC<ILevoBlockBaseProps<IBlogListing3Content>> = ({ con
                     </Typography>
                   </Box>
                   <Box elementKey={`blogs.${index}.blog-footer`}>
-                    <Box elementKey={`blogs.${index}.blog-author`}>
-                      <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>
+                    <AuthorRenderer authors={item?.authors ?? []} index={index} />
                     {item?.categories?.at(0)?.name && (
                       <Box elementKey={`blogs.${index}.category_wrapper`}>
                         <Icon elementKey={`blogs.${index}.category_icon`} />