56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
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>
|
|
{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 className='popup-content'>
|
|
<p className='text-center'>Downloading version list...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|