From c1f78fc04dcf33e3327f236a60fccd96022d5d82 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 6 Mar 2022 03:44:09 +0100
Subject: [PATCH] Created a component for popup windows

---
 src/components/AppLayout.tsx | 47 ++++++++++++++----------------------
 src/components/Popup.tsx     | 33 +++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 29 deletions(-)
 create mode 100644 src/components/Popup.tsx

diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index bf6c1ed..d1751be 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -12,6 +12,7 @@ import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery";
 import ReactTooltip from "react-tooltip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { ImageQuality } from "./Img";
+import Popup from "./Popup";
 
 type AppLayoutProps = {
   subPanel?: React.ReactNode;
@@ -218,37 +219,25 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           </Button>
         </div>
 
-        {/* Language selection background */}
-        <div
-          className={`fixed bg-shade inset-0 transition-all duration-500 z-20 grid place-content-center ${
-            appLayout.languagePanelOpen
-              ? "bg-opacity-60"
-              : "bg-opacity-0 pointer-events-none touch-none"
-          }`}
-          onClick={() => {
-            appLayout.setLanguagePanelOpen(false);
-          }}
+        <Popup
+          state={appLayout.languagePanelOpen}
+          setState={appLayout.setLanguagePanelOpen}
         >
-          <div
-            className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
-              appLayout.languagePanelOpen ? "scale-100" : "scale-0"
-            }`}
-          >
-            <h2 className="text-2xl">{props.langui.select_language}</h2>
-            <div className="flex flex-wrap flex-row gap-2">
-              {router.locales?.sort().map((locale) => (
-                <Button
-                  key={locale}
-                  active={locale === router.locale}
-                  href={router.asPath}
-                  locale={locale}
-                >
-                  {prettyLanguage(locale)}
-                </Button>
-              ))}
-            </div>
+          <h2 className="text-2xl">{props.langui.select_language}</h2>
+          <div className="flex flex-wrap flex-row gap-2">
+            {router.locales?.sort().map((locale) => (
+              <Button
+                key={locale}
+                active={locale === router.locale}
+                href={router.asPath}
+                locale={locale}
+                onClick={() => appLayout.setLanguagePanelOpen(false)}
+              >
+                {prettyLanguage(locale)}
+              </Button>
+            ))}
           </div>
-        </div>
+        </Popup>
 
         <ReactTooltip
           id="MainPanelTooltip"
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
new file mode 100644
index 0000000..808c101
--- /dev/null
+++ b/src/components/Popup.tsx
@@ -0,0 +1,33 @@
+import { Dispatch, SetStateAction } from "react";
+
+export type PopupProps = {
+  setState: Dispatch<SetStateAction<boolean | undefined>>;
+  state?: boolean;
+  children: React.ReactNode;
+};
+
+export default function Popup(props: PopupProps): JSX.Element {
+  return (
+    <div
+      className={`fixed inset-0 z-20 grid place-content-center ${
+        props.state ? "" : "pointer-events-none touch-none"
+      }`}
+    >
+      <div
+        className={`fixed bg-shade inset-0 transition-all duration-500 ${
+          props.state ? "bg-opacity-60" : "bg-opacity-0"
+        }`}
+        onClick={() => {
+          props.setState(false);
+        }}
+      />
+      <div
+        className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
+          props.state ? "scale-100" : "scale-0"
+        }`}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}