following and followers Pages done but missing Follow Button because its...

following and followers Pages done but missing Follow Button because its scuffed, also added connect sidebar and page

app/(content)/(home)/home/page.tsx

 import { CreateGweet } from "@/components/create-gweet/components/create-gweet"
 import { GlobalLayout } from "@/components/global-layout"
 import { Gweets } from "@/components/gweets/components/gweets"
+import { Connect } from "@/components/profile/components/connect"
 import ScrollToTop from "@/components/scroll-to-top"
 import { Trends } from "@/components/trends/components/trends"
 import { Card } from "@/components/ui/card"
+import { getCurrentUser } from "@/lib/session"
 
 export default async function HomePage() {
+    const session = await getCurrentUser()
+
     return (
         <GlobalLayout
             mainContent={
@@ -20,9 +24,16 @@ export default async function HomePage() {
                 </>
             }
             sideContent={
-                <Card className="p-5 bg-secondary">
-                    <Trends />
-                </Card>
+                <>
+                    <Card className="p-5 bg-secondary">
+                        <Trends />
+                    </Card>
+
+                    <Card className="p-6 bg-secondary">
+                        <Connect session={session} />
+                    </Card>
+                </>
+
             }
         />
     )

app/(content)/(home)/people/page.tsx

+import { BackHeader } from "@/components/back-header"
+import { GlobalLayout } from "@/components/global-layout"
+import { Connect } from "@/components/profile/components/connect"
+import { Card } from "@/components/ui/card"
+import { getCurrentUser } from "@/lib/session"
+
+export default async function PeoplePage() {
+    const session = await getCurrentUser()
+
+    return (
+        <GlobalLayout
+            mainContent={
+                <Card className="w-full overflow-hidden">
+                    <div className="p-3">
+                        <BackHeader>
+                            <h1 className="font-bold">People</h1>
+                        </BackHeader>
+                    </div>
+                    <div className="px-5">
+                        <Connect title="" session={session} />
+                    </div>
+                </Card>
+            }
+        />
+    )
+}
\ No newline at end of file

components/filter-sort-games.tsx

@@ -58,7 +58,7 @@ export default function Sort() {
 
     return (
         <Card className="p-6 grid items-start gap-2 bg-secondary">
-            <h1>Filter</h1>
+            <h1 className="font-bold">Filter</h1>
             <Select value={selectedCategory ? selectedCategory : undefined} key={selectedCategory[0]} onValueChange={(value) => setSelectedCategory(value)}>
                 <SelectTrigger className={`bg-background border-none w-full ${selectedCategory[0] ? 'font-extrabold' : ''}`}>
                     <SelectValue placeholder="By category..." />
@@ -123,7 +123,7 @@ export default function Sort() {
                 </SelectContent>
             </Select>
 
-            <h1 className="pt-6">Sort by</h1>
+            <h1 className="pt-6 font-bold">Sort by</h1>
             <div className="flex space-x-2 pb-1">
                 <Select value={selectedSortMethod} onValueChange={(value) => setSelectedSortMethod(value)}>
                     <SelectTrigger className="bg-background border-none w-full">

components/global-layout.tsx

@@ -4,7 +4,7 @@ export const GlobalLayout = ({ mainContent, sideContent }: { mainContent: JSX.El
             <div className="col-span-3 flex justify-center">
                 {mainContent}
             </div>
-            <aside className="self-start sticky top-[89px] col-span-1">
+            <aside className="self-start sticky top-[89px] col-span-1 space-y-6">
                 {sideContent}
             </aside>
         </div>

components/profile/components/connect.tsx

+"use client"
+
+import LoadingItem from "@/components/loading-item"
+import { TryAgain } from "@/components/try-again"
+import { Card } from "@/components/ui/card"
+import { User } from "next-auth"
+import Link from "next/link"
+import { useUsers } from "../hooks/use-users"
+import { UserItem } from "./user-item"
+
+export const Connect = ({ title = "Who to follow", session }: { title?: string, session: User | undefined }) => {
+    const { data: people, isLoading, isError, isSuccess } = useUsers()
+
+    return (
+        <div className="space-y-5 flex flex-col">
+            {title && <h1 className="font-bold p-1">{title}</h1>}
+            {isLoading ? (
+                <LoadingItem />
+            ) : isError ? (
+                <TryAgain />
+            ) : people?.length <= 0 ? (
+                <Card className="p-1">
+                    <h1 className="text-center">{"Empty :("}</h1>
+                </Card>
+            ) : isSuccess &&
+            people?.slice(title ? 0 : undefined, title ? 3 : undefined).map((person) => {
+                return <UserItem
+                    key={person?.id}
+                    user={person}
+                    sessionId={session?.id}
+                    showBio={title ? false : true} />
+            })}
+
+            {title && <Link href={"/people"} className="self-end hover:bg-accent p-1 rounded-lg">Show more</Link>}
+        </div>
+    )
+}
\ No newline at end of file

components/profile/components/profile-side-content.tsx

+import { Trends } from "@/components/trends/components/trends"
 import { Card } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
+import { getCurrentUser } from "@/lib/session"
+import { Connect } from "./connect"
+
+export const ProfileSideContent = async () => {
+    const session = await getCurrentUser()
 
-export const ProfileSideContent = () => {
     return (
-        <Card className="p-6 grid items-start gap-2 bg-secondary">
-            <h1>Media</h1>
-            <div className="grid grid-cols-1 gap-4">
-                {Array.from({ length: 2 }, (_, i) => i + 1).map((i) => {
-                    return (
-                        <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
-                    )
-                })}
-            </div>
-        </Card>
+        <div className="space-y-6">
+            <Card className="p-6 bg-secondary">
+                <div className="grid grid-cols-2 gap-3">
+                    {Array.from({ length: 4 }, (_, i) => i + 1).map((i) => {
+                        return (
+                            <Skeleton key={i} className="aspect-[1/1] bg-gray-300" />
+                        )
+                    })}
+                </div>
+            </Card>
+
+            <Card className="p-6 bg-secondary">
+                <Connect session={session} />
+            </Card>
+        </div>
     )
 }
\ No newline at end of file

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 = async ({ user, sessionId }: { user: IUser, sessionId: string | undefined }) => {
+export const UserItem = async ({ user, sessionId, showBio = true }: { user: IUser, sessionId: string | undefined, showBio?: Boolean }) => {
     const isFollowing = following({
         user,
         sessionUserId: sessionId ? sessionId : "",
@@ -37,7 +37,7 @@ export const UserItem = async ({ user, sessionId }: { user: IUser, sessionId: st
                     } */}
                 </div>
 
-                {user.bio ? (<p className="truncate w-full">{user.bio}</p>) : <p>&nbsp;</p>}
+                {showBio && (user.bio ? (<p className="truncate w-full">{user.bio}</p>) : <p>&nbsp;</p>)}
             </div>
         </Link>
     )

components/trends/components/trends.tsx

@@ -22,7 +22,7 @@ export const Trends = ({ title = "Trends" }: { title?: string }) => {
                     <h1 className="text-center">No trends yet</h1>
                 </Card>
             ) : isSuccess &&
-            hashtags?.map((hashtag, index) => {
+            hashtags?.slice(title ? 0 : undefined, title ? 3 : undefined).map((hashtag, index) => {
                 return (
                     <Trend
                         key={hashtag.id}