diff --git a/src/App.tsx b/src/App.tsx
index d59a2f6..c25baef 100644
--- a/src/App.tsx
+++ b/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 (
I would like to:
-
-
-
-
- }
- className='download-button border-gamedata-secondary bg-gamedata-primary shadow-gamedata-primary/20'
- handler={async () => {
- return await fetchGameData('com', callback)
- }}
- />
-
-
-
-
-
- }
- className='download-button border-gameAssets-secondary bg-gameAssets-primary shadow-gameAssets-primary/40'
- />
-
-
+
)
}
diff --git a/src/components/layout/Downloaders/Downloader/Downloader.tsx b/src/components/layout/Downloaders/Downloader/Downloader.tsx
new file mode 100644
index 0000000..85859ce
--- /dev/null
+++ b/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 = ({ className, children, content }) => {
+ const [activeContent, setActiveContent] = useState(false)
+
+ const handleActiveContent = (): void => {
+ return setActiveContent(!activeContent)
+ }
+
+ return (
+
+ {children}
+
+
+ {activeContent && (
+
+
+ {content.title}
+
+
+ {content.features.map((feature) => {
+ return (
+
+ {feature}
+
+ )
+ })}
+
+ )}
+
+
+ )
+}
diff --git a/src/components/layout/Downloaders/Downloader/index.ts b/src/components/layout/Downloaders/Downloader/index.ts
new file mode 100644
index 0000000..8a00690
--- /dev/null
+++ b/src/components/layout/Downloaders/Downloader/index.ts
@@ -0,0 +1 @@
+export * from './Downloader'
diff --git a/src/components/layout/Downloaders/Downloaders.tsx b/src/components/layout/Downloaders/Downloaders.tsx
new file mode 100644
index 0000000..c665a6c
--- /dev/null
+++ b/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 (
+
+ xd
+
+
+
+
+
+ }
+ className='download-button border-gamedata-secondary bg-gamedata-primary shadow-gamedata-primary/20'
+ handler={async () => {
+ return await handleConvertion('com', callback)
+ }}
+ />
+
+
+
+
+
+ }
+ className='download-button border-gameAssets-secondary bg-gameAssets-primary shadow-gameAssets-primary/40'
+ />
+
+
+
+ )
+}
diff --git a/src/components/layout/Downloaders/index.ts b/src/components/layout/Downloaders/index.ts
new file mode 100644
index 0000000..abf75a3
--- /dev/null
+++ b/src/components/layout/Downloaders/index.ts
@@ -0,0 +1 @@
+export * from './Downloaders'