Created a component for popup windows

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 */}
+        <Popup
-        <div
+          state={appLayout.languagePanelOpen}
-          className={`fixed bg-shade inset-0 transition-all duration-500 z-20 grid place-content-center ${
+          setState={appLayout.setLanguagePanelOpen}
-            appLayout.languagePanelOpen
-              ? "bg-opacity-60"
-              : "bg-opacity-0 pointer-events-none touch-none"
-          }`}
-          onClick={() => {
-            appLayout.setLanguagePanelOpen(false);
-          }}
         >
-          <div
+          <h2 className="text-2xl">{props.langui.select_language}</h2>
-            className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
+          <div className="flex flex-wrap flex-row gap-2">
-              appLayout.languagePanelOpen ? "scale-100" : "scale-0"
+            {router.locales?.sort().map((locale) => (
-            }`}
+              <Button
-          >
+                key={locale}
-            <h2 className="text-2xl">{props.langui.select_language}</h2>
+                active={locale === router.locale}
-            <div className="flex flex-wrap flex-row gap-2">
+                href={router.asPath}
-              {router.locales?.sort().map((locale) => (
+                locale={locale}
-                <Button
+                onClick={() => appLayout.setLanguagePanelOpen(false)}
-                  key={locale}
+              >
-                  active={locale === router.locale}
+                {prettyLanguage(locale)}
-                  href={router.asPath}
+              </Button>
-                  locale={locale}
+            ))}
-                >
-                  {prettyLanguage(locale)}
-                </Button>
-              ))}
-            </div>
           </div>
-        </div>
+        </Popup>
 
         <ReactTooltip
           id="MainPanelTooltip"

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>
+  );
+}