msg

2026-08-20 12:23:30 +02:00
parent e61750f314
commit a980812137
9 changed files with 351 additions and 106 deletions
@@ -0,0 +1,74 @@
+"use client"
+
+import { LogOut, Mail, MailCheck, MailWarning, UserRound } from "lucide-react"
+import { GlassModal, fieldClass, labelClass } from "./glass-modal"
+import type { User } from "@/lib/types"
+
+interface AccountSettingsDialogProps {
+  user: User
+  onClose: () => void
+  onLogout: () => void
+}
+
+export function AccountSettingsDialog({ user, onClose, onLogout }: AccountSettingsDialogProps) {
+  return (
+    <GlassModal title="Account settings" onClose={onClose}>
+      <div className="flex flex-col gap-5">
+        <div className="flex items-center gap-3">
+          <div className="flex h-14 w-14 items-center justify-center rounded-full bg-blue-500 text-xl font-bold text-white">
+            {user.username.charAt(0).toUpperCase()}
+          </div>
+          <div className="min-w-0">
+            <p className="truncate text-lg font-semibold text-white">{user.username}</p>
+            <p className="truncate text-sm text-white/60">{user.email ?? "No email on file"}</p>
+          </div>
+        </div>
+
+        <div>
+          <label className={labelClass}>Username</label>
+          <div className={`${fieldClass} flex items-center gap-2 opacity-80`}>
+            <UserRound className="h-4 w-4 text-white/60" />
+            {user.username}
+          </div>
+        </div>
+
+        <div>
+          <label className={labelClass}>Email</label>
+          <div className={`${fieldClass} flex items-center gap-2 opacity-80`}>
+            <Mail className="h-4 w-4 text-white/60" />
+            {user.email ?? "—"}
+          </div>
+          {user.email && (
+            <p className="mt-1.5 flex items-center gap-1.5 text-xs text-white/60">
+              {user.email_verified ? (
+                <>
+                  <MailCheck className="h-3.5 w-3.5 text-emerald-300" /> Verified
+                </>
+              ) : (
+                <>
+                  <MailWarning className="h-3.5 w-3.5 text-amber-300" /> Not verified
+                </>
+              )}
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between border-t border-white/15 pt-4">
+          <button
+            onClick={onLogout}
+            className="flex items-center gap-1.5 rounded-xl border border-white/20 bg-white/10 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-white/20"
+          >
+            <LogOut className="h-4 w-4" /> Sign out
+          </button>
+
+          <button
+            onClick={onClose}
+            className="rounded-xl border-2 border-emerald-400/80 bg-white/5 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-500/20"
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </GlassModal>
+  )
+}