{/* Shadcn-like Accessible Modal (React/JSX Compatible) */}
{/* To use this modal with React state: 1. Add a state: const [isOpen, setIsOpen] = useState(false) 2. Conditionally render the modal-container based on `isOpen` 3. Attach `onClick={() => setIsOpen(false)}` to the backdrop and close buttons
*/}
<div className="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-desc"> <div className="modal-wrapper"> {/* The backdrop */} <div className="absolute inset-0 bg-surface-dark/60 backdrop-blur-sm cursor-pointer" aria-hidden="true"></div> {/* The Modal Panel */} <div className="modal-panel md glass bg-surface/80 border-border/50 flex flex-col max-h-[90vh]"> <div className="modal-header"> <h3 id="modal-title">Edit Profile</h3> <button aria-label="Close modal">✕</button> </div> <div className="modal-body overflow-y-auto flex-1" id="modal-desc"> <p className="mb-4">Make changes to your profile here. Click save when you're done.</p> <div className="dolphin-form-standard mb-3"> <label htmlFor="name">Name</label> <input type="text" id="name" placeholder="John Doe" /> </div> <div className="dolphin-form-standard"> <label htmlFor="username">Username</label> <input type="text" id="username" placeholder="@johndoe" /> </div> </div> <div className="modal-footer"> <button className="outlined plain py-2 px-4 rounded-lg">Cancel</button> <button className="filled primary py-2 px-4 rounded-lg glow">Save Changes</button> </div> </div> </div>
</div>