idk anymore put it in issues

app/(content)/(user)/[username]/followers/page.tsx

-export default async function Following() {
+import { BackHeader } from "@/components/back-header"
+import { GlobalLayout } from "@/components/global-layout"
+import { UserFollows } from "@/components/profile/components/user-follows"
+import { Card } from "@/components/ui/card"
+import { getCurrentUser } from "@/lib/session"
+
+export default async function Followers({ params }: { params: { username: string } }) {
+    const session = await getCurrentUser()
+
     return (
-        <div>
-            <h1>Following Page WIP</h1>
-        </div>
+        <GlobalLayout
+            mainContent={
+                <Card className="w-full overflow-hidden ">
+                    <div className="p-3">
+                        <BackHeader>
+                            <h1 className="font-bold">Followers</h1>
+                        </BackHeader>
+                    </div>
+                    <div className="px-5">
+                        <UserFollows username={params.username} session={session} />
+                    </div>
+                </Card>
+            }
+        />
     )
 }
\ No newline at end of file

components/profile/components/user-follows.tsx

@@ -36,8 +36,17 @@ export const UserFollows = ({ username, session }: { username: string, session:
             return (
                 <div className="m-6 flex justify-center">
                     <div className="font-bold">
-                        <h1>You are not following anyone.</h1>
-                        <p>When you do, it&apos;ll show up here.</p>
+                        {pathValue === "following" ?
+                            <>
+                                <h1>You are not following anyone.</h1>
+                                <p>When you do, it&apos;ll show up here.</p>
+                            </>
+                            :
+                            <>
+                                <h1>You have no followers.</h1>
+                                <p>When you do, they&apos;ll show up here.</p>
+                            </>
+                        }
                     </div>
                 </div>
             )
@@ -45,8 +54,17 @@ export const UserFollows = ({ username, session }: { username: string, session:
         return (
             <div className="m-6 flex justify-center">
                 <div className="font-bold">
-                    <h1><span className="text-sky-500">@{username}</span> is not following anyone yet.</h1>
-                    <p>When they do, it&apos;ll show up here.</p>
+                    {pathValue === "following" ?
+                        <>
+                            <h1><span className="text-sky-500">@{username}</span> is not following anyone yet.</h1>
+                            <p>When they do, it&apos;ll show up here.</p>
+                        </>
+                        :
+                        <>
+                            <h1><span className="text-sky-500">@{username}</span> has no followers.</h1>
+                            <p>When they do, they&apos;ll show up here.</p>
+                        </>
+                    }
                 </div>
             </div>
         )

components/profile/components/user-item.tsx

@@ -4,7 +4,7 @@ import Link from "next/link"
 import { IUser } from "../types"
 import { following } from "../utils/following"
 
-export const UserItem = ({ user, sessionId }: { user: IUser, sessionId: string | undefined }) => {
+export const UserItem = async ({ user, sessionId }: { user: IUser, sessionId: string | undefined }) => {
     const isFollowing = following({
         user,
         sessionUserId: sessionId ? sessionId : "",
@@ -27,11 +27,14 @@ export const UserItem = ({ user, sessionId }: { user: IUser, sessionId: string |
                         <h1 className="text-sm text-sky-500">@{user.username}</h1>
                     </div>
 
-                    <FollowButton
-                        userId={user.id}
-                        username={user.username ? user.username : ""}
-                        isFollowing={isFollowing}
-                    />
+                    {/* TODO does not refresh button when following or unfolling */}
+                    {/* {sessionId && sessionId !== user.id &&
+                        <FollowButton
+                            userId={user.id}
+                            username={user.username ? user.username : ""}
+                            isFollowing={isFollowing}
+                        />
+                    } */}
                 </div>
 
                 {user.bio ? (<p className="truncate w-full">{user.bio}</p>) : <p>&nbsp;</p>}