48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import type React from "react";
|
|
|
|
import { Button, Dialog, DialogContent } from "@repo/shadcn-ui/components";
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
import { X } from "lucide-react";
|
|
|
|
interface FullscreenModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const FullscreenModal = ({
|
|
isOpen,
|
|
onClose,
|
|
title,
|
|
children,
|
|
className,
|
|
}: FullscreenModalProps) => {
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent
|
|
className={cn(
|
|
"max-w-none max-h-none w-screen h-screen",
|
|
"bg-background border-0 rounded-none p-0",
|
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
className
|
|
)}
|
|
>
|
|
{/* Header fijo */}
|
|
<div className='flex items-center justify-between p-6 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
|
|
<h2 className='text-2xl font-semibold tracking-tight'>{title}</h2>
|
|
<Button variant='ghost' size='sm' onClick={onClose} className='size-8 p-0'>
|
|
<X className='h-4 w-4' />
|
|
<span className='sr-only'>Cerrar</span>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Contenido scrolleable */}
|
|
<div className='flex-1 overflow-auto p-6'>{children}</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|