const content = props.content; const open = props.open; const onOpenChange = props.onOpenChange; const toggle = props.toggle; const isChild = props.isChild; const OverlayContainer = styled.div` left: 0px; right: 0px; bottom: 0px; top: 0px; position: absolute; width: 100%; height: 100vh; z-index: 20; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; @media (max-width: 1024px) { height: 100vh; } `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; border-radius: 8px; width: 489px; @media (max-width: 1024px) { width: 90%; } `; const PopupContainerChild = styled.div` position: absolute; top: 10px; background-color: #1d1d21; padding: 1rem; border-radius: 8px; width: 489px; @media (max-width: 1024px) { width: 90%; } `; return ( <Dialog.Root open={open} onOpenChange={onOpenChange}> <Dialog.Trigger asChild>{toggle}</Dialog.Trigger> <Dialog.Overlay asChild> <OverlayContainer> <Dialog.Content asChild> {isChild ? ( <PopupContainerChild>{content}</PopupContainerChild> ) : ( <PopupContainer>{content}</PopupContainer> )} </Dialog.Content> </OverlayContainer> </Dialog.Overlay> </Dialog.Root> );