get height by size props

This commit is contained in:
anovazzi1 2023-07-12 15:44:52 -03:00
commit a2cbc7584a

View file

@ -59,20 +59,25 @@ function BaseModal({
(child) => (child as React.ReactElement).type === Content (child) => (child as React.ReactElement).type === Content
); );
let sizeClass = ""; let minWidth: string;
let height: string;
switch (size) { switch (size) {
case "small": case "small":
sizeClass = "min-w-[40vw]"; minWidth = "min-w-[40vw]";
height = "h-[40vh]";
break; break;
case "medium": case "medium":
sizeClass = "min-w-[60vw]"; minWidth = "min-w-[60vw]";
height = "h-[60vh]";
break; break;
case "large": case "large":
sizeClass = "min-w-[80vw]"; minWidth = "min-w-[80vw]";
height = "h-[80vh]";
break; break;
default: default:
sizeClass = "min-w-[80vw]"; minWidth = "min-w-[80vw]";
height = "h-[80vh]";
break; break;
} }
@ -80,9 +85,9 @@ function BaseModal({
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger className="hidden"></DialogTrigger> <DialogTrigger className="hidden"></DialogTrigger>
<DialogContent className={sizeClass}> <DialogContent className={minWidth}>
{headerChild} {headerChild}
<div className="mt-2 flex h-[80vh] w-full ">{ContentChild}</div> <div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );