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