From 12fb2589ecc0662647feaab0a62d482eca24cedb Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 13 Feb 2024 19:24:31 +0100
Subject: [PATCH] introducing reusable modal component

---
 src/assets/css/components/Modal.scss | 14 ++++++++++++++
 src/components/ui/Modal.jsx          | 22 ++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/assets/css/components/Modal.scss
 create mode 100644 src/components/ui/Modal.jsx

diff --git a/src/assets/css/components/Modal.scss b/src/assets/css/components/Modal.scss
new file mode 100644
index 0000000..b36d989
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
new file mode 100644
index 0000000..afc3f1a
--- /dev/null
+++ b/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>
+	);
+}