user page ui

app/(content)/(user)/[userid]/loading.tsx

+import { Card } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+
+// loading component, this renders when loading in /games happens
+export default function Loading() {
+    return (
+        <div className="main-content h-full">
+            <Card className="w-full h-full overflow-hidden">
+                <div className="h-64 overflow-hidden">
+                    <Skeleton className="bg-slate-600  dark:bg-slate-400" />
+                </div>
+                <div className="p-6 md:p-12 ss:flex">
+                    <Skeleton className="h-52 w-52 -mt-36 rounded-full" />
+                    <div className="ml-6 md:ml-12 space-y-3">
+                        <Skeleton className="h-6 w-1/4 bg-gray-400 dark:bg-gray-200" />
+                        <Skeleton className="h-6 w-1/4 bg-sky-500" />
+                    </div>
+                </div>
+                <div className="px-6 md:px-12">
+                    {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
+                    {/* tweets */}
+                </div>
+            </Card >
+            <div className="side-content">
+                <Card className="p-6 grid items-start gap-2 bg-secondary">
+                    <Skeleton className="h-6 w-1/4 bg-gray-400 dark:bg-gray-200" />
+                    <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>
+        </div >
+    )
+}
\ No newline at end of file

app/(content)/(user)/[userid]/page.tsx

-'use client'
-import { useSession } from "next-auth/react";
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+import { Card } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { UserAvatar } from "@/components/user-avatar"
+import { getCurrentUser } from "@/lib/session"
+import { redirect } from "next/navigation"
 
+export default async function User({ params }: { params: { userid: string } }) {
+  const user = await getCurrentUser()
 
-export default function User({ params }: { params: { userid: string } }) {
-    const { data: session } = useSession();
-    return (
-      <div className="mt-8 px-4">
-         <div className="flex-shrink-0">
-         <title>{`GameUnity User`}</title>
-        <div className="h-10 w-10 rounded-full bg-gray-300"></div> {/* Profile picture */}
+  if (user?.username !== params.userid) {
+    redirect('/')
+  }
+
+  return (
+    <div className="main-content h-full">
+      <Card className="w-full h-full overflow-hidden">
+        <div className="h-64 overflow-hidden">
+          <AspectRatio ratio={889 / 500} className="bg-slate-600  dark:bg-slate-400">
+            {/* profile banner */}
+            {/* <Image
+              src={ }
+              alt={ }
+              fill
+              priority
+              className="object-center" /> */}
+          </AspectRatio>
         </div>
-        <div className="flex flex-col">
-          <p className="text-white text-2xl font-semibold">
-            {session?.user.name}
-          </p>
-          <div 
-            className="
-              flex 
-              flex-row 
-              items-center 
-              gap-2 
-              mt-4 
-              text-neutral-500
-          ">
+        <div className="p-6 md:p-12 ss:flex">
+          <UserAvatar
+            user={{ name: user.name || null, image: user.image || null }}
+            className="h-52 w-52 -mt-36"
+          />
+          <div className="ml-6 md:ml-12 space-y-3">
+            <h1 className="text-2xl font-bold">{user.name}</h1>
+            <h1 className="text-md text-sky-500">@{user.username}</h1>
+            {/* <h1 className="pt-3">{user.bio}</h1> */}
           </div>
         </div>
-        <div className="flex flex-row items-center mt-4 gap-6">
-          <div className="flex flex-row items-center gap-1">
-            <p className="text-neutral-500">Following</p>
-          </div>
-          <div className="flex flex-row items-center gap-1">
-            <p className="text-white">{}</p>
-            <p className="text-neutral-500">Followers</p>
-          </div>
+        <div className="px-6 md:px-12">
+          {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
+          {/* tweets */}
         </div>
+      </Card >
+      <div className="side-content">
+        <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>
-
-    )
+    </div >
+  )
 }
\ No newline at end of file

app/layout.tsx

@@ -24,12 +24,10 @@ export default function RootLayout({
       <head />
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <Suspense fallback={<SiteLoad />}>
-            <Providers>
-              {children}
-              <Toaster />
-            </Providers>
-          </Suspense>
+          <Providers>
+            {children}
+            <Toaster />
+          </Providers>
         </ThemeProvider>
       </body>
     </html>

components/user-avatar.tsx

@@ -16,7 +16,7 @@ export function UserAvatar({ user, ...props }: UserAvatarProps) {
             ) : (
                 <AvatarFallback>
                     <span className="sr-only">{user.name}</span>
-                    <Icons.user className="h-4 w-4" />
+                    <Icons.user className="h-3/5 w-3/5" />
                 </AvatarFallback>
             )}
         </Avatar>