45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { cn } from "@xtablo/shared";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@xtablo/ui/components/dialog";
|
|
|
|
// Custom Modal Component - now using shadcn/ui Dialog
|
|
interface CustomModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
width?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
|
|
}
|
|
|
|
export function CustomModal({ isOpen, onClose, title, children, width = "md" }: CustomModalProps) {
|
|
const getWidthClasses = () => {
|
|
switch (width) {
|
|
case "sm":
|
|
return "max-w-sm";
|
|
case "md":
|
|
return "max-w-md";
|
|
case "lg":
|
|
return "max-w-lg";
|
|
case "xl":
|
|
return "max-w-xl";
|
|
case "2xl":
|
|
return "max-w-2xl";
|
|
case "full":
|
|
return "max-w-full mx-4";
|
|
case "auto":
|
|
return "w-auto min-w-80 max-w-[90vw]";
|
|
default:
|
|
return "max-w-md";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className={cn("max-h-[90vh] flex flex-col", getWidthClasses())}>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="overflow-y-auto flex-1">{children}</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|