From 3a877640842c5397854db4f5b4482a134a4f08d2 Mon Sep 17 00:00:00 2001
From: akshatnema <akshatnema.school@gmail.com>
Date: Fri, 11 Oct 2024 15:38:06 +0530
Subject: [PATCH] Added links back to BlogPostItem

---
 components/Avatar.tsx                  | 15 ++++++++++++++-
 components/navigation/BlogPostItem.tsx | 15 ++++++++++++---
 next-env.d.ts                          |  2 +-
 pages/blog/index.tsx                   |  4 ++--
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/components/Avatar.tsx b/components/Avatar.tsx
index 9e78890bc9d3..5fb0a39bafe5 100644
--- a/components/Avatar.tsx
+++ b/components/Avatar.tsx
@@ -31,5 +31,18 @@ export default function Avatar({ name, photo, link, className }: AvatarProps) {
     />
   );
 
-  return link ? <span data-testid='Avatars-link'>{avatar}</span> : <React.Fragment>{avatar}</React.Fragment>;
+  return link ? (
+    <span
+      onClick={(e) => {
+        e.preventDefault();
+
+        window.open(link, '_blank');
+      }}
+      data-testid='Avatars-link'
+    >
+      {avatar}
+    </span>
+  ) : (
+    <React.Fragment>{avatar}</React.Fragment>
+  );
 }
diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx
index be42f800c6a6..b1b34112855f 100644
--- a/components/navigation/BlogPostItem.tsx
+++ b/components/navigation/BlogPostItem.tsx
@@ -96,15 +96,24 @@ export default forwardRef(function BlogPostItem(
                       {post.authors
                         .map((author, index) =>
                           author.link ? (
-                            <span key={index} data-alt={author.name}>
+                            <span
+                              key={index}
+                              data-alt={author.name}
+                              onClick={(e) => {
+                                e.preventDefault();
+
+                                // Handle the click event, e.g., navigate to author.link
+                                window.open(author.link, '_blank');
+                              }}
+                            >
                               {author.name}
                             </span>
                           ) : (
                             author.name
                           )
                         )
-                        .reduce((prev, curr) => (
-                          <React.Fragment>
+                        .reduce((prev, curr, index) => (
+                          <React.Fragment key={`author-${index}`}>
                             {prev} & {curr}
                           </React.Fragment>
                         ))}
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc6cc..a4a7b3f5cfa2 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
index be82516b097c..37958cec4308 100644
--- a/pages/blog/index.tsx
+++ b/pages/blog/index.tsx
@@ -60,8 +60,8 @@ export default function BlogIndexPage() {
   const image = '/img/social/blog.webp';
 
   useEffect(() => {
-    setIsClient(router.isReady);
-  }, [router.isReady]);
+    setIsClient(true);
+  }, []);
 
   return (
     <GenericLayout title='Blog' description={description} image={image} wide>