From 99fbe98992a4d566dd5d9f54e6f73ddf37af8d38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Akg=C3=BCl?= <s86116@bht-berlin.de>
Date: Wed, 7 Jun 2023 23:13:38 +0200
Subject: [PATCH] user page ui
---
app/(content)/(user)/[userid]/loading.tsx | 38 +++++++++++
app/(content)/(user)/[userid]/page.tsx | 83 ++++++++++++++---------
app/layout.tsx | 10 ++-
components/user-avatar.tsx | 2 +-
4 files changed, 94 insertions(+), 39 deletions(-)
create mode 100644 app/(content)/(user)/[userid]/loading.tsx
diff --git a/app/(content)/(user)/[userid]/loading.tsx b/app/(content)/(user)/[userid]/loading.tsx
new file mode 100644
index 0000000..c9e709d
--- /dev/null
+++ b/app/(content)/(user)/[userid]/loading.tsx
@@ -0,0 +1,38 @@
+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
diff --git a/app/(content)/(user)/[userid]/page.tsx b/app/(content)/(user)/[userid]/page.tsx
index 86ddc8a..d4b5006 100644
--- a/app/(content)/(user)/[userid]/page.tsx
+++ b/app/(content)/(user)/[userid]/page.tsx
@@ -1,40 +1,59 @@
-'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
diff --git a/app/layout.tsx b/app/layout.tsx
index 421584b..15bc36a 100644
--- a/app/layout.tsx
+++ b/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>
diff --git a/components/user-avatar.tsx b/components/user-avatar.tsx
index c627d49..c81c4c3 100644
--- a/components/user-avatar.tsx
+++ b/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>
--
GitLab