44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import * as React from "react"
|
|
|
|
const AlertDialog = ({ open, onOpenChange, children }: any) => {
|
|
if (!open) return null
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div className="fixed inset-0 bg-black/50" onClick={() => onOpenChange(false)} />
|
|
<div className="relative z-50">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const AlertDialogContent = ({ children, className }: any) => (
|
|
<div className={`bg-slate-800 rounded-lg shadow-lg max-w-md w-full p-6 ${className}`}>
|
|
{children}
|
|
</div>
|
|
)
|
|
|
|
const AlertDialogHeader = ({ children }: any) => <div className="mb-4">{children}</div>
|
|
const AlertDialogTitle = ({ children, className }: any) => <h2 className={`text-xl font-bold ${className}`}>{children}</h2>
|
|
const AlertDialogDescription = ({ children, className }: any) => <p className={`text-sm text-slate-400 ${className}`}>{children}</p>
|
|
const AlertDialogFooter = ({ children }: any) => <div className="mt-6 flex justify-end gap-2">{children}</div>
|
|
const AlertDialogAction = ({ children, onClick, disabled, className }: any) => (
|
|
<button onClick={onClick} disabled={disabled} className={`px-4 py-2 rounded ${className}`}>
|
|
{children}
|
|
</button>
|
|
)
|
|
const AlertDialogCancel = ({ children, disabled, className }: any) => (
|
|
<button disabled={disabled} className={`px-4 py-2 rounded ${className}`}>
|
|
{children}
|
|
</button>
|
|
)
|
|
|
|
export {
|
|
AlertDialog,
|
|
AlertDialogContent,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
}
|