File tree Expand file tree Collapse file tree 1 file changed +15
-3
lines changed
Expand file tree Collapse file tree 1 file changed +15
-3
lines changed Original file line number Diff line number Diff line change @@ -28,6 +28,11 @@ type Props = {
2828 * Additional classes to apply to the modal.
2929 */
3030 className ?: string ;
31+
32+ /**
33+ * Additional classes to apply to the modal content.
34+ */
35+ contentClassName ?: string ;
3136} ;
3237
3338const MODAL_MOTION = {
@@ -43,6 +48,7 @@ export function Modal({
4348 children,
4449 closeOnOutsideClick = true ,
4550 className,
51+ contentClassName,
4652} : Props ) {
4753 const handleOutsideClick = ( e : React . MouseEvent ) => {
4854 if (
@@ -65,20 +71,26 @@ export function Modal({
6571 className = { cn ( 'fixed inset-0 z-50 flex w-full items-center justify-center' , className ) }
6672 >
6773 < div className = "absolute inset-0 bg-black/50" onClick = { handleOutsideClick } />
68- < ModalContent > { children } </ ModalContent >
74+ < ModalContent contentClassName = { contentClassName } > { children } </ ModalContent >
6975 </ motion . div >
7076 </ Portal >
7177 ) ;
7278}
7379
74- export function ModalContent ( { children } : { children : React . ReactNode } ) {
80+ export function ModalContent ( {
81+ children,
82+ contentClassName,
83+ } : {
84+ children : React . ReactNode ;
85+ contentClassName ?: string ;
86+ } ) {
7587 return (
7688 < Flex
7789 role = "dialog"
7890 aria-modal = "true"
7991 justifyContent = "center"
8092 alignItems = "center"
81- className = " relative z-50 rounded-lg bg-white p-6"
93+ className = { cn ( ' relative z-50 rounded-lg bg-white p-6' , contentClassName ) }
8294 >
8395 { children }
8496 </ Flex >
You can’t perform that action at this time.
0 commit comments