Start working on the profile refactoring.

2026-07-14 11:16:13 +02:00 · 2025-12-21 16:55:12 +01:00
parent 428782e8a4
commit 116229a29e
77 changed files with 5076 additions and 509 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { Account, Session, User } from "@/db/schema/02_user";
+import { ProfileSidebar } from "./profile-sidebar";
+import {ProfileProviders} from "@/components/wrappers/dashboard/profile/profile-providers";
+import {ProfileAccount} from "@/components/wrappers/dashboard/profile/profile-account";
+import {ProfileAppearance} from "@/components/wrappers/dashboard/profile/profile-apperance";
+import {ProfileSecurity} from "@/components/wrappers/dashboard/profile/profile-security";
+import {ProfileGeneral} from "@/components/wrappers/dashboard/profile/profile-general";
+
+type ProfileModalProps = {
+    open: boolean;
+    user: User;
+    sessions: Session[];
+    currentSession: Session;
+    accounts: Account[];
+    onOpenChange: (open: boolean) => void;
+};
+
+export const ProfileModal = ({ user, sessions, currentSession, accounts, open, onOpenChange }: ProfileModalProps) => {
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="w-[95vw] h-[90vh] max-w-md lg:max-w-[1000px] lg:h-[800px] p-0 overflow-hidden flex flex-col outline-none gap-0 rounded-xl bg-background">
+                <DialogHeader className="sr-only">
+                    <DialogTitle>Settings</DialogTitle>
+                    <DialogDescription>Manage your account settings</DialogDescription>
+                </DialogHeader>
+                <Tabs defaultValue="profile" orientation="vertical" className="flex flex-col lg:flex-row h-full w-full">
+                    <ProfileSidebar user={user} />
+
+                    <div className="flex-1 overflow-y-auto bg-background h-full scroll-smooth">
+                        <TabsContent value="profile" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileGeneral user={user} />
+                        </TabsContent>
+
+                        <TabsContent value="security" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileSecurity
+                                user={user}
+                                sessions={sessions}
+                                currentSession={currentSession}
+                                credentialAccount={accounts.find((acc) => acc.providerId === "credential")!}
+                            />
+                        </TabsContent>
+
+                        <TabsContent value="providers" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileProviders accounts={accounts} />
+                        </TabsContent>
+
+                        <TabsContent value="account" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileAccount user={user} />
+                        </TabsContent>
+
+                        <TabsContent value="appearance" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileAppearance />
+                        </TabsContent>
+                    </div>
+                </Tabs>
+            </DialogContent>
+        </Dialog>
+    );
+};