Files
yt-dlp-webui/frontend/src/components/FreeSpaceIndicator.tsx
2023-07-31 19:14:50 +02:00

29 lines
640 B
TypeScript

import StorageIcon from '@mui/icons-material/Storage'
import { useEffect, useState } from 'react'
import { formatGiB } from '../utils'
import { useRPC } from '../hooks/useRPC'
const FreeSpaceIndicator = () => {
const [freeSpace, setFreeSpace] = useState(0)
const { client } = useRPC()
useEffect(() => {
client.freeSpace().then(r => setFreeSpace(r.result))
}, [client])
return (
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<StorageIcon />
<span>
&nbsp;{formatGiB(freeSpace)}&nbsp;
</span>
</div>
)
}
export default FreeSpaceIndicator