1
import { Calendar, Mail, User } from "lucide-react";
2
import { useAuth } from "@/client/auth";
3
import { Card, PageHeader } from "@/client/components/ui";
4
import { formatTimestamp } from "@/client/lib";
5
 
6
export const ProfilePage = () => {
7
  const { user } = useAuth();
8
  if (!user) return null;
9
  return (
10
    <div className="animate-slide-up space-y-6">
11
      <PageHeader label="Account" title="Profile & Settings" />
12
13
      <div className="grid gap-5">
14
        {/* User info card */}
15
        <Card>
16
          <div className="flex items-start gap-4">
17
            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-accent-500/15 text-accent-400">
18
              <User className="h-7 w-7" />
19
            </div>
20
            <div className="min-w-0">
21
              <h1 className="font-display text-xl font-semibold text-zinc-100">{user.displayName}</h1>
22
              <p className="mt-0.5 text-sm text-zinc-500">@{user.slug}</p>
23
            </div>
24
          </div>
25
26
          <dl className="mt-6 space-y-4 text-sm">
27
            <div className="flex items-center gap-3 text-zinc-400">
28
              <Mail className="h-4 w-4 shrink-0 text-zinc-500" />
29
              <div>
30
                <dt className="text-xs uppercase tracking-[0.18em] text-zinc-500">Email</dt>
31
                <dd className="mt-0.5 text-zinc-300">{user.email}</dd>
32
              </div>
33
            </div>
34
            <div className="flex items-center gap-3 text-zinc-400">
35
              <Calendar className="h-4 w-4 shrink-0 text-zinc-500" />
36
              <div>
37
                <dt className="text-xs uppercase tracking-[0.18em] text-zinc-500">Member since</dt>
38
                <dd className="mt-0.5 text-zinc-300">{formatTimestamp(user.createdAt)}</dd>
39
              </div>
40
            </div>
41
          </dl>
42
        </Card>
43
      </div>
44
    </div>
45
  );
46
};