xtablo-source/apps/external/src/CustomModal.tsx

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>
  );
}