made changes

Author: Davidthecode

app/[username]/(userprofile wrapper)/followers/page.tsx

@@ -29,7 +29,7 @@ const UsersFollowers = ({ user }: { user: FollowerType }) => {
     return (
         <div
             key={user._id}
-            className="flex items-start space-x-2 pb-2"
+            className="flex items-center space-x-2 mb-6"
         >
             <Link
                 href={`/${user.userId.username}`}
@@ -40,7 +40,7 @@ const UsersFollowers = ({ user }: { user: FollowerType }) => {
                     alt={user.userId.name || "User"}
                     width={40}
                     height={40}
-                    className="w-12 h-w-12 rounded-full"
+                    className="w-14 h-w-14 rounded-full"
                 />
             </Link>
 

app/[username]/(userprofile wrapper)/following/page.tsx

@@ -29,7 +29,7 @@ const UsersFollowing = ({ user }: { user: FollowingType }) => {
     return (
         <div
             key={user._id}
-            className="flex items-start space-x-2 mb-5"
+            className="flex items-center space-x-2 mb-5"
         >
             <Link
                 href={`/${user.userId.username}`}
@@ -40,7 +40,7 @@ const UsersFollowing = ({ user }: { user: FollowingType }) => {
                     alt={user.userId.name || "User"}
                     width={40}
                     height={40}
-                    className="w-12 h-w-12 rounded-full"
+                    className="w-14 h-w-14 rounded-full"
                 />
             </Link>
 

components/blogDisplay/authorInfo.tsx

@@ -38,8 +38,14 @@ const AuthorInfo = ({ blog, setBlog }: authorInfoType) => {
                         <h1 className="text-xl font-semibold">Written by {blog.authorId.name}</h1>
                     </Link>
                     <p className="text-sm">
-                        {blog.authorId.followers.length}{" "}
-                        {blog.authorId.followers.length === 1 ? "follower" : "followers"}
+                        {blog.authorId.followers.length > 0 ? (
+                            <Link href={`/${blog.authorId.username}/followers`}>
+                                {blog.authorId.followers.length}{" "}
+                                {blog.authorId.followers.length === 1 ? "follower" : "followers"}
+                            </Link>
+                        ) : (
+                            `${blog.authorId.followers.length} follower`
+                        )}
                     </p>
                     <p className="text-sm pt-3">{blog.authorId.bio}</p>
                 </div>

components/blogDisplay/recommendedBlogs.tsx

@@ -49,14 +49,14 @@ const RecommendedBlogs = ({ username, authorName, authorBlogs }: RecommendedBlog
     return (
         <div className="flex flex-col">
             <h1 className="py-10 font-semibold">More from {authorName} </h1>
-            <div className="flex flex-col space-y-10 md:space-y-0 md:flex-row items-center justify-between flex-wrap md:border-b pb-8 md:pb-16">
+            <div className="flex flex-col space-y-10 md:space-y-0 md:gap-y-16 md:flex-row items-start justify-between flex-wrap md:border-b pb-8 md:pb-16">
                 {authorBlogs.map(blog => {
                     const payload = { blogTitle: blog.title, blogContent: blog.content, publishedAt: blog.publishedAt, provider }
                     const { previewtitle, previewText, timePublished } = handleBlogContentPreview(payload);
                     return (
                         <div
                             key={blog._id}
-                            className="flex flex-col justify-between w-full md:w-[46%] md:h-[23rem] pb-4 border-b md:border-none space-y-3"
+                            className="flex flex-col justify-between w-full md:w-[46%] md:h-[23rem] border-b md:border-none pb-4 space-y-3"
                         >
                             <Link
                                 href={`/${username}/${blog.blogId}`}