Dark Modal Dialog

1import { useState } from "react";
2 
3export default function DarkModal() {
4  const [open, setOpen] = useState(true);
5 
6  return (
7    <div className="flex min-h-screen items-center justify-center bg-[#09090b] p-8">
8      <button
9        onClick={() => setOpen(true)}
10        className="rounded-lg bg-orange-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-orange-600"
11      >
12        Open Modal
13      </button>
14 
15      {open && (
16        <div className="fixed inset-0 z-50 flex items-center justify-center">
17          {/* Backdrop */}
18          <div
19            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
20            onClick={() => setOpen(false)}
21          />
22          
23          {/* Dialog */}
24          <div className="relative w-full max-w-md rounded-xl border border-zinc-800 bg-[#111113] p-0 shadow-2xl">
25            {/* Header */}
26            <div className="flex items-center justify-between border-b border-zinc-800 px-6 py-4">
27              <h2 className="text-lg font-semibold text-white">Confirm Action</h2>
28              <button
29                onClick={() => setOpen(false)}
30                className="rounded-md p-1 text-zinc-400 transition hover:bg-zinc-800 hover:text-white"
31              >
32                <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
33                  <path strokeLinecap="round" d="M6 18L18 6M6 6l12 12" />
34                </svg>
35              </button>
36            </div>
37            
38            {/* Body */}
39            <div className="px-6 py-5">
40              <p className="text-sm leading-relaxed text-zinc-400">
41                Are you sure you want to proceed? This action cannot be easily undone and will affect your current workspace configuration.
42              </p>
43            </div>
44            
45            {/* Footer */}
46            <div className="flex items-center justify-end gap-3 border-t border-zinc-800 px-6 py-4">
47              <button
48                onClick={() => setOpen(false)}
49                className="rounded-lg border border-zinc-700 px-4 py-2 text-sm font-medium text-zinc-300 transition hover:bg-zinc-800"
50              >
51                Cancel
52              </button>
53              <button
54                onClick={() => setOpen(false)}
55                className="rounded-lg bg-orange-500 px-4 py-2 text-sm font-medium text-white transition hover:bg-orange-600"
56              >
57                Confirm
58              </button>
59            </div>
60          </div>
61        </div>
62      )}
63    </div>
64  );
65}