Add a basic popup

src/routes/Installs.css

@@ -0,0 +1,35 @@
+@import 'tailwindcss';
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.popup-overlay {
+  @apply fixed w-screen h-screen z-[9999] flex justify-center items-center animate-[fadeIn_0.2s_ease-out_forwards] left-0 top-0 bg-[rgba(0,0,0,0.5)];
+}
+
+.popup-overlay.fade-out {
+  @apply animate-[fadeOut_0.2s_ease-out_forwards];
+}
+
+.popup-box {
+  @apply relative w-[85vw] h-[80vh] shadow-[0_0_20px_rgba(0,0,0,0.2)] overflow-auto p-6 rounded-lg bg-[#191919];
+}
+
+.close-button {
+  @apply flex justify-center items-center absolute bg-[#363636] hover:bg-[#484848] text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl border-[none] left-2 top-2 transition-colors;
+}

src/routes/Installs.tsx

@@ -1,12 +1,49 @@
-export default function Installs () {
-  function downloadVersion() {
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import './Installs.css'
+import { useState } from 'react'
+import { faX } from '@fortawesome/free-solid-svg-icons'
 
+export default function Installs() {
+  const [showPopup, setShowPopup] = useState(false)
+  const [fadeOut, setFadeOut] = useState(false)
+
+  function downloadVersion() {
+    setShowPopup(true)
+    setFadeOut(false)
+  }
+
+  function handleOverlayClick(e: React.MouseEvent<HTMLDivElement>) {
+    if (e.target === e.currentTarget) {
+      setFadeOut(true)
+      setTimeout(() => setShowPopup(false), 200)
+    }
   }
 
   return (
     <>
       <p className='text-3xl ml-4 mt-4'>Installs</p>
-      <button className='button text-3xl mt-4 absolute right-4 top-4' onClick={downloadVersion}>Download new version</button>
+      <button className='button text-3xl mt-4 absolute right-4 top-4' onClick={downloadVersion}>
+        Download new version
+      </button>
+      {showPopup && (
+        <div
+          className={`popup-overlay ${fadeOut ? 'fade-out' : ''}`}
+          onClick={handleOverlayClick}
+        >
+          <div className='popup-box'>
+            <button
+              className='close-button'
+              onClick={() => {
+                setFadeOut(true)
+                setTimeout(() => setShowPopup(false), 200)
+              }}
+            >
+              <FontAwesomeIcon icon={faX} />
+            </button>
+            <p className='text-xl text-center'>Select versions to download</p>
+          </div>
+        </div>
+      )}
     </>
   )
 }