From 9fa6457ec68497c2024a107813a65628171465a4 Mon Sep 17 00:00:00 2001
From: Web Spinner Bot <hello@web-spinner.ai>
Date: Fri, 17 Nov 2023 06:10:52 +0000
Subject: [PATCH] [Web Spinner] Add User Profile Viewing Page

---
 pages/profile.tsx                             | 17 +++++++++++
 .../dashboard/UserProfile/index.module.scss   | 28 +++++++++++++++++++
 .../dashboard/UserProfile/index.tsx           | 17 +++++++++++
 styles/Profile.module.scss                    |  9 ++++++
 4 files changed, 71 insertions(+)
 create mode 100644 pages/profile.tsx
 create mode 100644 src/components/dashboard/UserProfile/index.module.scss
 create mode 100644 src/components/dashboard/UserProfile/index.tsx
 create mode 100644 styles/Profile.module.scss

diff --git a/pages/profile.tsx b/pages/profile.tsx
new file mode 100644
index 0000000..99cda16
--- /dev/null
+++ b/pages/profile.tsx
@@ -0,0 +1,17 @@
+import { NextPage } from "next"
+import { ReactElement } from "react"
+import UserProfile from "src/components/dashboard/UserProfile"
+import Menu from "src/components/menu/Menu"
+import { AuthenticatedLayout } from "src/layouts"
+import styles from "styles/Profile.module.scss"
+
+const Profile: NextPage = (): ReactElement => (
+  <>
+    <Menu />
+    <div className={styles.container}>
+      <UserProfile />
+    </div>
+  </>
+)
+
+export default AuthenticatedLayout(Profile)
diff --git a/src/components/dashboard/UserProfile/index.module.scss b/src/components/dashboard/UserProfile/index.module.scss
new file mode 100644
index 0000000..c6e8d8a
--- /dev/null
+++ b/src/components/dashboard/UserProfile/index.module.scss
@@ -0,0 +1,28 @@
+@import "~styles/variables.scss";
+
+.profileCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: $card-background;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: $box-shadow;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+
+.name {
+  margin-top: 20px;
+  font-size: 1.5rem;
+  color: $text-primary;
+}
+
+.email {
+  margin-top: 8px;
+  color: $text-secondary;
+}
diff --git a/src/components/dashboard/UserProfile/index.tsx b/src/components/dashboard/UserProfile/index.tsx
new file mode 100644
index 0000000..88a8526
--- /dev/null
+++ b/src/components/dashboard/UserProfile/index.tsx
@@ -0,0 +1,17 @@
+import { ReactElement } from "react"
+import { useSelector } from "react-redux"
+import styles from "./index.module.scss"
+
+const UserProfile = (): ReactElement => {
+  const user = useSelector((state: any) => state.auth.user)
+
+  return (
+    <div className={styles.profileCard}>
+      <img src={user.avatar} alt="User Avatar" className={styles.avatar} />
+      <h1 className={styles.name}>{user.name}</h1>
+      <p className={styles.email}>{user.email}</p>
+    </div>
+  )
+}
+
+export default UserProfile
diff --git a/styles/Profile.module.scss b/styles/Profile.module.scss
new file mode 100644
index 0000000..139f920
--- /dev/null
+++ b/styles/Profile.module.scss
@@ -0,0 +1,9 @@
+@import "./variables.scss";
+@import "./mixins.scss";
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}