feat(components|public): Add Design Loader and change Downloaders popup style

This commit adds a Design Loader to Downloaders component and modifies the popup  style with new classes. The loader is shown when the user clicks the Download GameData button. The popup is now centered and uses flex to position its content. Additionally, it now displays a message that depends on the state of the download process, and the close button's style is also modified.

src/components/design/index.ts

@@ -0,0 +1 @@
+export * from './Loader'

src/components/layout/Downloaders/Downloaders.tsx

@@ -1,4 +1,5 @@
 import { Fragment, useState } from 'react'
+import classNames from 'classnames'
 
 import { Image, Popup } from '../../system'
 import { Button } from '../Button'
@@ -6,10 +7,13 @@ import { GameAssetsDownloader, GameDataDownloader } from '../../../config/GameDo
 import { handleConvertion } from '../../../tools/handleConvertion'
 import { Downloader } from './Downloader'
 import type { ConvertionHandler } from '../../../types/global'
+import { Loader } from '../../design'
 
 export const Downloaders: React.FC = () => {
   const [message, setMessage] = useState('')
-  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+  const [popup, setPopup] = useState(false)
+  const [loading, setLoading] = useState(true)
 
   const callback: ConvertionHandler = (message, state = 'idle') => {
     switch (state) {
@@ -21,13 +25,47 @@ export const Downloaders: React.FC = () => {
         return setLoading(false)
       case 'error':
         setMessage(message)
+        setError(true)
         return setLoading(false)
     }
   }
 
+  const downloadGameData = async (): Promise<void> => {
+    setPopup(true)
+    setLoading(true)
+
+    const startTime = new Date()
+    await handleConvertion('com', callback)
+
+    const endTime = new Date()
+    const seconds = ((endTime.getTime() - startTime.getTime()) / 1000).toFixed(2)
+
+    return callback(`Completed in: ${seconds} seconds`, 'success')
+  }
+
   return (
     <Fragment>
-      <Popup condition={false}>xd</Popup>
+      <Popup condition={popup}>
+        <span
+          className={classNames('', {
+            'text-red-600': error
+          })}>
+          {message}
+        </span>
+
+        <Loader active={loading} className='mt-10' />
+
+        <Button
+          value='Close'
+          icon={<Image src='/icons/cross.png' />}
+          className={classNames('bg-red-600 mt-6 opacity-0 p-2 px-4 active:opacity-40 invisible text-white', {
+            '!opacity-100 !visible': !loading
+          })}
+          handler={() => {
+            return setPopup(!popup)
+          }}
+        />
+      </Popup>
 
       <ul className='flex gap-x-8'>
         <Downloader content={GameDataDownloader}>
@@ -37,9 +75,7 @@ export const Downloaders: React.FC = () => {
             value='Download Gamedata'
             icon={<Image src='/icons/game.png' size={22} />}
             className='download-button border-gamedata-secondary bg-gamedata-primary shadow-gamedata-primary/20'
-            handler={async () => {
-              return await handleConvertion('com', callback)
-            }}
+            handler={downloadGameData}
           />
         </Downloader>
 

src/components/system/Popup/Popup.tsx

@@ -8,7 +8,7 @@ interface PopupProps {
 export const Popup: React.FC<PopupProps> = ({ condition, children }) => {
   return (
     <AnimateView
-      className='absolute z-20 top-0 left-0 w-screen h-screen bg-black/50 backdrop-blur-xl'
+      className='absolute flex text-white items-center flex-col transition-all justify-center z-20 top-0 left-0 w-screen h-screen bg-black/40 backdrop-blur-xl'
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}