refactor(Downloader(s)): seperate components

src/App.tsx

@@ -1,51 +1,12 @@
-import { useState } from 'react'
-
-import { Image, Window, Button, Downloader } from './components'
-import { fetchGameData } from './utils/fetchGameData'
-import {
-  GameAssetsDownloader,
-  GameDataDownloader
-} from './config/GameDownloader'
+import { Window } from './components/system'
+import { Downloaders } from './components/layout'
 
 const Main: React.FC = () => {
-  const [_error, setError] = useState('')
-  const [_response, setResponse] = useState('')
-  const [_loading, setLoading] = useState(false)
-
-  const callback = (message: string, error = false): void => {
-    if (error) return setError(message)
-    if (message === 'COMPLETED') setLoading(false)
-    else setResponse(message)
-  }
-
   return (
     <Window>
       <span className='mb-20 text-white'>I would like to:</span>
 
-      <ul className='flex gap-x-8'>
-        <Downloader content={GameDataDownloader}>
-          <Image src='/images/Gamedata.png' className='w-[400px]' />
-
-          <Button
-            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 fetchGameData('com', callback)
-            }}
-          />
-        </Downloader>
-
-        <Downloader content={GameAssetsDownloader}>
-          <Image src='/images/GameAssets.png' className='w-[400px]' />
-
-          <Button
-            value='Download GameAssets'
-            icon={<Image src='/icons/picture.png' icon />}
-            className='download-button border-gameAssets-secondary bg-gameAssets-primary shadow-gameAssets-primary/40'
-          />
-        </Downloader>
-      </ul>
+      <Downloaders />
     </Window>
   )
 }

src/components/layout/Downloaders/Downloader/Downloader.tsx

@@ -0,0 +1,61 @@
+import classNames from 'classnames'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState } from 'react'
+
+export interface IDownloaderContent {
+  title: string
+  features: string[]
+}
+
+interface DownloaderProps {
+  className?: string
+  children: React.ReactNode
+  content: IDownloaderContent
+}
+
+export const Downloader: React.FC<DownloaderProps> = ({ className, children, content }) => {
+  const [activeContent, setActiveContent] = useState(false)
+
+  const handleActiveContent = (): void => {
+    return setActiveContent(!activeContent)
+  }
+
+  return (
+    <li
+      className={classNames(className, 'relative rounded-xl shadow-red-500 hover:shadow-2xl')}
+      onMouseEnter={handleActiveContent}
+      onMouseLeave={handleActiveContent}>
+      {children}
+
+      <AnimatePresence>
+        {activeContent && (
+          <motion.ul
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1, transition: { staggerChildren: 0.5 } }}
+            exit={{ opacity: 0 }}
+            className='pointer-events-none text-center absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center rounded-xl bg-black/70 pb-5 text-[12px] text-white'>
+            <motion.h1
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className='mb-3 text-[16px]'>
+              {content.title}
+            </motion.h1>
+
+            {content.features.map((feature) => {
+              return (
+                <motion.span
+                  initial={{ opacity: 0, y: 50, scale: 0.75 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 50, scale: 0.75 }}
+                  key={feature}>
+                  {feature}
+                </motion.span>
+              )
+            })}
+          </motion.ul>
+        )}
+      </AnimatePresence>
+    </li>
+  )
+}

src/components/layout/Downloaders/Downloader/index.ts

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

src/components/layout/Downloaders/Downloaders.tsx

@@ -0,0 +1,58 @@
+import { Fragment, useState } from 'react'
+
+import { Image, Popup } from '../../system'
+import { Button } from '../Button'
+import { GameAssetsDownloader, GameDataDownloader } from '../../../config/GameDownloader'
+import { handleConvertion } from '../../../tools/handleConvertion'
+import { Downloader } from './Downloader'
+import type { ConvertionHandler } from '../../../types/global'
+
+export const Downloaders: React.FC = () => {
+  const [message, setMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const callback: ConvertionHandler = (message, state = 'idle') => {
+    switch (state) {
+      case 'loading':
+        setMessage(message)
+        return setLoading(true)
+      case 'success':
+        setMessage(message)
+        return setLoading(false)
+      case 'error':
+        setMessage(message)
+        return setLoading(false)
+    }
+  }
+
+  return (
+    <Fragment>
+      <Popup condition={false}>xd</Popup>
+
+      <ul className='flex gap-x-8'>
+        <Downloader content={GameDataDownloader}>
+          <Image src='/images/Gamedata.png' />
+
+          <Button
+            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)
+            }}
+          />
+        </Downloader>
+
+        <Downloader content={GameAssetsDownloader}>
+          <Image src='/images/GameAssets.png' />
+
+          <Button
+            value='Download GameAssets'
+            icon={<Image src='/icons/picture.png' icon />}
+            className='download-button border-gameAssets-secondary bg-gameAssets-primary shadow-gameAssets-primary/40'
+          />
+        </Downloader>
+      </ul>
+    </Fragment>
+  )
+}

src/components/layout/Downloaders/index.ts

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