75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
"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>
|
|
)
|
|
}
|