File size: 986 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import React from "react";
import { cn } from "#/utils/utils";
/** Shared modal content widths (sm / md / lg / xl). */
export type ModalWidth = "sm" | "md" | "lg" | "xl";
export const MODAL_WIDTH_CLASS: Record<ModalWidth, string> = {
sm: "w-[384px]",
md: "w-[520px]",
lg: "w-[640px]",
xl: "w-[720px]",
};
export const MODAL_MAX_WIDTH_VIEWPORT = "max-w-[90vw]";
export function modalWidthClassName(width: ModalWidth): string {
return MODAL_WIDTH_CLASS[width];
}
interface ModalBodyProps {
testID?: string;
children: React.ReactNode;
className?: React.HTMLProps<HTMLDivElement>["className"];
width?: ModalWidth;
}
export function ModalBody({
testID,
children,
className,
width = "sm",
}: ModalBodyProps) {
return (
<div
data-testid={testID}
className={cn(
"bg-base-secondary flex flex-col gap-6 items-center p-6 rounded-xl",
modalWidthClassName(width),
className,
)}
>
{children}
</div>
);
}
|