[Web Spinner] Add User Profile Viewing Page

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)

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;
+}

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

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;
+}