chore: refactor account settings code + add skeleton for profile building

apps/web/app/orgs/[orgslug]/dash/user-account/settings/[subpage]/page.tsx

@@ -5,75 +5,111 @@ import UserEditGeneral from '@components/Dashboard/Pages/UserAccount/UserEditGen
 import UserEditPassword from '@components/Dashboard/Pages/UserAccount/UserEditPassword/UserEditPassword'
 import Link from 'next/link'
 import { getUriWithOrg } from '@services/config/config'
-import { Info, Lock } from 'lucide-react'
+import { Info, Lock, LucideIcon, User } from 'lucide-react'
 import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
+import UserProfile from '@components/Dashboard/Pages/UserAccount/UserProfile/UserProfile';
+
+interface User {
+  username: string;
+  // Add other user properties as needed
+}
+
+interface Session {
+  user?: User;
+  // Add other session properties as needed
+}
 
 export type SettingsParams = {
   subpage: string
   orgslug: string
 }
 
-function SettingsPage(props: { params: Promise<SettingsParams> }) {
-  const params = use(props.params);
-  const session = useLHSession() as any
+type NavigationItem = {
+  id: string
+  label: string
+  icon: LucideIcon
+  component: React.ComponentType
+}
+
+const navigationItems: NavigationItem[] = [
+  {
+    id: 'general',
+    label: 'General',
+    icon: Info,
+    component: UserEditGeneral
+  },
+  {
+    id: 'security',
+    label: 'Password',
+    icon: Lock,
+    component: UserEditPassword
+  },
+  {
+    id: 'profile',
+    label: 'Profile',
+    icon: User,
+    component: UserProfile
+  }
+]
+
+const SettingsNavigation = ({ 
+  items, 
+  currentPage, 
+  orgslug 
+}: { 
+  items: NavigationItem[]
+  currentPage: string
+  orgslug: string 
+}) => (
+  <div className="flex space-x-5 font-black text-sm">
+    {items.map((item) => (
+      <Link
+        key={item.id}
+        href={getUriWithOrg(orgslug, `/dash/user-account/settings/${item.id}`)}
+      >
+        <div
+          className={`py-2 w-fit text-center border-black transition-all ease-linear ${
+            currentPage === item.id ? 'border-b-4' : 'opacity-50'
+          } cursor-pointer`}
+        >
+          <div className="flex items-center space-x-2.5 mx-2">
+            <item.icon size={16} />
+            <div>{item.label}</div>
+          </div>
+        </div>
+      </Link>
+    ))}
+  </div>
+)
+
+function SettingsPage({ params }: { params: Promise<SettingsParams> }) {
+  const { subpage, orgslug } = use(params);
+  const session = useLHSession() as Session;
 
   useEffect(() => {}, [session])
 
+  const CurrentComponent = navigationItems.find(item => item.id === subpage)?.component;
+
   return (
     <div className="h-full w-full bg-[#f8f8f8]">
-      <div className="pl-10 pr-10  tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
+      <div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 nice-shadow">
         <BreadCrumbs
           type="user"
           last_breadcrumb={session?.user?.username}
-        ></BreadCrumbs>
+        />
         <div className="my-2 tracking-tighter">
           <div className="w-100 flex justify-between">
             <div className="pt-3 flex font-bold text-4xl">Account Settings</div>
           </div>
         </div>
-        <div className="flex space-x-5 font-black text-sm">
-          <Link
-            href={
-              getUriWithOrg(params.orgslug, '') +
-              `/dash/user-account/settings/general`
-            }
-          >
-            <div
-              className={`py-2 w-fit text-center border-black transition-all ease-linear ${
-                params.subpage.toString() === 'general'
-                  ? 'border-b-4'
-                  : 'opacity-50'
-              } cursor-pointer`}
-            >
-              <div className="flex items-center space-x-2.5 mx-2">
-                <Info size={16} />
-                <div>General</div>
-              </div>
-            </div>
-          </Link>
-          <Link
-            href={
-              getUriWithOrg(params.orgslug, '') +
-              `/dash/user-account/settings/security`
-            }
-          >
-            <div
-              className={`flex space-x-4 py-2 w-fit text-center border-black transition-all ease-linear ${
-                params.subpage.toString() === 'security'
-                  ? 'border-b-4'
-                  : 'opacity-50'
-              } cursor-pointer`}
-            >
-              <div className="flex items-center space-x-2.5 mx-2">
-                <Lock size={16} />
-                <div>Password</div>
-              </div>
-            </div>
-          </Link>
-        </div>
+        <SettingsNavigation 
+          items={navigationItems}
+          currentPage={subpage}
+          orgslug={orgslug}
+        />
       </div>
-      <div className="h-6"></div>
+      <div className="h-6" />
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -81,8 +117,7 @@ function SettingsPage(props: { params: Promise<SettingsParams> }) {
         transition={{ duration: 0.1, type: 'spring', stiffness: 80 }}
         className="h-full overflow-y-auto"
       >
-        {params.subpage == 'general' ? <UserEditGeneral /> : ''}
-        {params.subpage == 'security' ? <UserEditPassword /> : ''}
+        {CurrentComponent && <CurrentComponent />}
       </motion.div>
     </div>
   )