get height by size props
This commit is contained in:
parent
9841d92ab1
commit
a2cbc7584a
1 changed files with 12 additions and 7 deletions
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue