introducing reusable modal component

src/assets/css/components/Modal.scss

@@ -0,0 +1,14 @@
+dialog {
+	&::backdrop {
+		backdrop-filter: blur(6px) brightness(0.2);
+	}
+
+	width: clamp(50%, 900px, 90%);
+}
+
+.game-modal {
+	&__close-button {
+		@apply absolute top-2 right-2 bg-construction p-4 border-none;
+	}
+	overflow: visible;
+}

src/components/ui/Modal.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+export default function Modal({ open, onClose, children, className }) {
+	const modalRef = useRef(null);
+
+	useEffect(() => {
+		const { current: el } = modalRef;
+		el.showModal();
+	}, []);
+
+	useEffect(() => {
+		const { current: el } = modalRef;
+		if (open) el.showModal();
+	}, [open]);
+
+	return (
+		<dialog className={className} ref={modalRef} onClose={onClose}>
+			{children}
+		</dialog>
+	);
+}