1
import { Link, useNavigate, useOutletContext } from "react-router-dom";
2
import { Clock, Mail } from "lucide-react";
3
import { CreateInbox } from "@/client/components/create-inbox";
4
import { Card } from "@/client/components/ui";
5
import type { AppShellContext } from "@/client/components/app-shell";
6
import { fullDate } from "@/client/lib/time";
7
 
8
export function CreatePage() {
9
  const { sessions, onCreated } = useOutletContext<AppShellContext>();
10
  const navigate = useNavigate();
11
 
12
  return (
13
    <div className="animate-slide-up">
14
      <div className="grid gap-6 lg:grid-cols-[minmax(280px,440px)_minmax(0,1fr)]">
15
        <CreateInbox
16
          onCreated={(session) => {
17
            onCreated(session);
18
            navigate(`/inbox/${encodeURIComponent(session.address)}`);
19
          }}
20
        />
21
22
        <Card>
23
          <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-zinc-500">
24
            <Mail className="h-3.5 w-3.5" />
25
            Recent inboxes
26
          </h2>
27
28
          {sessions.length === 0 ? (
29
            <p className="mt-4 text-sm leading-relaxed text-zinc-400">
30
              No inboxes yet. Created addresses are saved on this device and removed when they expire.
31
            </p>
32
          ) : (
33
            <div className="mt-4 space-y-1.5">
34
              {sessions.map((session, i) => {
35
                const expires = new Date(session.expiresAt);
36
                const remaining = expires.getTime() - Date.now();
37
                const alive = remaining > 0;
38
39
                return (
40
                  <Link
41
                    key={session.address}
42
                    className="animate-scale-fade opacity-0 group flex items-center gap-3 rounded-lg border border-zinc-800/50 bg-zinc-800/30 px-4 py-3 hover:border-zinc-700/60 hover:bg-zinc-800/60 hover:-translate-y-0.5 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
43
                    style={{ animationDelay: `${Math.min(i, 8) * 60}ms` }}
44
                    to={`/inbox/${encodeURIComponent(session.address)}`}
45
                  >
46
                    <span
47
                      className={`inline-grid h-7 w-7 shrink-0 place-items-center rounded-full ${
48
                        alive ? "bg-accent-500/10 text-accent-400" : "bg-zinc-800 text-zinc-600"
49
                      }`}
50
                    >
51
                      <Mail className="h-3.5 w-3.5" />
52
                    </span>
53
                    <div className="min-w-0 flex-1">
54
                      <strong className="block truncate text-sm font-medium text-zinc-200 group-hover:text-accent-400">
55
                        {session.address}
56
                      </strong>
57
                      <span className="flex items-center gap-1 text-xs text-zinc-400">
58
                        <Clock className="h-3 w-3" />
59
                        {alive ? `expires ${fullDate(session.expiresAt)}` : "expired"}
60
                      </span>
61
                    </div>
62
                  </Link>
63
                );
64
              })}
65
            </div>
66
          )}
67
        </Card>
68
      </div>
69
    </div>
70
  );
71
}