From ae88f8e930659b5d2a63f8734bf44102d51a8a38 Mon Sep 17 00:00:00 2001
From: vishyyyyyyyyy <217375979+vishyyyyyyyyy@users.noreply.github.com>
Date: Thu, 30 Oct 2025 21:34:45 -0500
Subject: [PATCH] user profile page

added a name, username, email, profile picture, post count, reports submitted, saved and uploaded files on the profile page
---
 src/app/layout.tsx       |  6 +++++
 src/app/profile/page.tsx | 53 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/app/profile/page.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6c10e86..c234850 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
 import { Bai_Jamjuree, Inter } from 'next/font/google';
 import { type Metadata } from 'next';
 import { GoogleAnalytics } from '@next/third-parties/google';
+import Link from 'next/link';
 
 import theme from '@src/utils/theme';
 
@@ -59,6 +60,11 @@ export default function RootLayout({
         {process.env.NEXT_PUBLIC_VERCEL_ENV === 'production' && (
           <GoogleAnalytics gaId="G-3NDS0P32CZ" />
         )}
+        <nav>
+          <Link href="/profile" className="px-3 py-1 hover:underline">
+            Profile
+          </Link>
+        </nav>
       </body>
     </html>
   );
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
new file mode 100644
index 0000000..ff31ef5
--- /dev/null
+++ b/src/app/profile/page.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import Avatar from '@mui/material/Avatar';
+import Link from 'next/link';
+
+export default function ProfilePage() {
+  const user = {
+    name: 'John Doe',
+    handle: '@johndoe',
+    email: 'johndoe@example.com',
+    avatar: '/images/avatar.jpg',
+    posts: 0,
+    reports_submitted: 0,
+  };
+
+  return (
+    <main className="min-h-screen p-8">
+      <div className="mx-auto max-w-4xl">
+        <div className="flex items-center gap-6">
+          <Avatar
+            alt={user.name}
+            src={user.avatar}
+            sx={{ width: 96, height: 96 }}
+          />
+          <div>
+            <h1 className="text-2xl font-semibold">{user.name}</h1>
+            <div className="text-sm text-white">{user.handle}</div>
+            <p className="mt-2 text-white">{user.email}</p>
+            <div className="mt-4 flex gap-4 text-sm text-white">
+              <div>
+                <strong className="font-bold">{user.posts}</strong> posts
+              </div>
+              <div>
+                <strong className="font-bold">{user.reports_submitted}</strong>{' '}
+                reports submitted
+              </div>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-3">
+            <Link
+              href="/profile/edit"
+              className="rounded-md px-4 py-2 text-white"
+            >
+              Edit Profile
+            </Link>
+          </div>
+        </div>
+        <h2 className="mt-10 text-xl font-semibold">Saved Notes:</h2>
+        <h2 className="mt-10 text-xl font-semibold">Uploaded Notes:</h2>
+      </div>
+    </main>
+  );
+}