feat: reusable dialog component

apps/client/src/common/components/dialog/Dialog.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+
+import IconButton from '../buttons/IconButton';
+
+import style from './Dialog.module.scss';
+
+interface DialogProps {
+  isOpen: boolean;
+  title: string;
+  showCloseButton?: boolean;
+  bodyElements: ReactNode;
+  footerElements: ReactNode;
+  onClose: () => void;
+}
+
+export default function Dialog({ isOpen, title, showCloseButton, bodyElements, footerElements, onClose }: DialogProps) {
+  return (
+    <BaseDialog.Root
+      open={isOpen}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose();
+      }}
+    >
+      <BaseDialog.Portal>
+        <BaseDialog.Popup className={style.dialog}>
+          <div className={style.title}>
+            {title}
+            {showCloseButton && (
+              <IconButton variant='subtle-white' onClick={onClose}>
+                <IoClose />
+              </IconButton>
+            )}
+          </div>
+          <div className={style.body}>{bodyElements}</div>
+          <div className={style.footer}>{footerElements}</div>
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+}