Modals

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { X, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function ModalsSection() {
29  const [modal, setModal] = useState<'sm' | 'md' | 'lg' | null>(null);
30  const sizes = { sm: 'max-w-sm', md: 'max-w-lg', lg: 'max-w-2xl' };
31  const modalLayer = modal && typeof document !== 'undefined'
32    ? createPortal(
33        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
34          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setModal(null)} />
35          <div className={`relative w-full ${sizes[modal]} rounded-2xl bg-white p-6 shadow-theme-lg dark:bg-gray-800`}>
36            <div className="mb-4 flex items-center justify-between">
37              <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">Modal Title</h3>
38              <button onClick={() => setModal(null)} className="flex size-8 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/5 dark:hover:text-gray-300">
39                <X className="size-5" />
40              </button>
41            </div>
42            <div className="space-y-4">
43              <p className="text-sm text-gray-600 dark:text-gray-400">This is a {modal.toUpperCase()} sized modal dialog. It is rendered in a portal, so it stays centered on the screen even when the component preview is lower on the page.</p>
44              <div className="flex justify-end gap-3">
45                <button onClick={() => setModal(null)} className="rounded-xl border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:border-white/10 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">Cancel</button>
46                <button onClick={() => setModal(null)} className="rounded-xl bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600 transition-colors">Confirm</button>
47              </div>
48            </div>
49          </div>
50        </div>,
51        document.body,
52      )
53    : null;
54
55  return (
56    <SectionCard title="Modals" sourceSlug="/ui/source/ui-elements/modals">
57      <div className="flex flex-wrap gap-3">
58        {(['sm', 'md', 'lg'] as const).map((s) => (
59          <button key={s} onClick={() => setModal(s)} className="rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition-colors">
60            Open {s.toUpperCase()} Modal
61          </button>
62        ))}
63      </div>
64      {modalLayer}
65    </SectionCard>
66  );
67}