105 lines
3.9 KiB
TypeScript
105 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Phone, Building2, AtSign, CalendarDays, LogOut } from "lucide-react";
|
|
|
|
const ROLE_COLORS: Record<string, string> = {
|
|
admin: "bg-destructive/15 text-destructive border-destructive/20",
|
|
organizer: "bg-purple-soft text-purple-accent border-purple-accent/20",
|
|
member: "bg-rose-soft text-rose-accent border-rose-accent/20",
|
|
};
|
|
|
|
export default function ProfilePage() {
|
|
const router = useRouter();
|
|
const user = useAuth((s) => s.user);
|
|
const logout = useAuth((s) => s.logout);
|
|
|
|
if (!user) return null;
|
|
|
|
const initials = user.full_name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
|
|
const joinedDate = new Date(user.created_at).toLocaleDateString("en-GB", { month: "long", year: "numeric" });
|
|
|
|
async function handleLogout() {
|
|
await logout();
|
|
router.push("/login");
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-md mx-auto space-y-6 animate-fade-in">
|
|
<div className="flex flex-col items-center gap-4 pt-4">
|
|
{/* Avatar with gradient ring */}
|
|
<div className="relative">
|
|
<div className="absolute -inset-1 rounded-full bg-gradient-to-br from-rose-accent via-purple-accent to-gold-accent opacity-50 blur-sm" />
|
|
<Avatar className="relative h-20 w-20 border-2 border-background">
|
|
<AvatarFallback className="bg-surface-elevated text-rose-accent text-2xl font-bold">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<p className="font-display text-2xl font-bold tracking-wide">{user.full_name}</p>
|
|
<p className="text-sm text-muted-foreground mt-1">{user.email}</p>
|
|
</div>
|
|
|
|
<Badge className={`${ROLE_COLORS[user.role] ?? "bg-surface-elevated text-muted-foreground"} border capitalize`}>
|
|
{user.role}
|
|
</Badge>
|
|
</div>
|
|
|
|
<Separator className="bg-border/30" />
|
|
|
|
<div className="space-y-1 rounded-xl bg-surface-elevated border border-border/30 p-4">
|
|
{user.phone && (
|
|
<div className="flex items-center justify-between py-2">
|
|
<span className="flex items-center gap-2 text-sm text-dim">
|
|
<Phone size={14} />
|
|
Phone
|
|
</span>
|
|
<span className="text-sm text-foreground">{user.phone}</span>
|
|
</div>
|
|
)}
|
|
{user.organization_name && (
|
|
<div className="flex items-center justify-between py-2">
|
|
<span className="flex items-center gap-2 text-sm text-dim">
|
|
<Building2 size={14} />
|
|
Organization
|
|
</span>
|
|
<span className="text-sm text-foreground">{user.organization_name}</span>
|
|
</div>
|
|
)}
|
|
{user.instagram_handle && (
|
|
<div className="flex items-center justify-between py-2">
|
|
<span className="flex items-center gap-2 text-sm text-dim">
|
|
<AtSign size={14} />
|
|
Instagram
|
|
</span>
|
|
<span className="text-sm text-foreground">{user.instagram_handle}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center justify-between py-2">
|
|
<span className="flex items-center gap-2 text-sm text-dim">
|
|
<CalendarDays size={14} />
|
|
Member since
|
|
</span>
|
|
<span className="text-sm text-foreground">{joinedDate}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="w-full border-destructive/30 text-destructive hover:bg-destructive/10 hover:border-destructive/50"
|
|
onClick={handleLogout}
|
|
>
|
|
<LogOut size={16} />
|
|
Sign out
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|