45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import { HddStackFill, Ethernet, Github, CheckSquareFill, XSquareFill } from 'react-bootstrap-icons';
|
||
import './Footer.css';
|
||
|
||
type Props = {
|
||
freeSpace: string,
|
||
statistics?: string,
|
||
serverAddr: string,
|
||
connected: boolean,
|
||
}
|
||
|
||
const isDesktop = window.innerWidth > 510;
|
||
|
||
export const Footer = ({ freeSpace, statistics, serverAddr, connected }: Props) => {
|
||
return (
|
||
<footer className="footer">
|
||
<div className="container">
|
||
<span className="pe-3">
|
||
<small>Made with ❤️ on 🌍</small>
|
||
</span>
|
||
<span className="px-3 separator">
|
||
<HddStackFill></HddStackFill> {' '}
|
||
<small>{freeSpace ? `${freeSpace.trim()}iB` : '-'}</small>
|
||
</span>
|
||
{isDesktop ?
|
||
<span className="px-3 separator">
|
||
<Ethernet></Ethernet> {' '}
|
||
<small>{serverAddr ? `${serverAddr}:3022` : 'not defined'}</small>
|
||
</span> :
|
||
null
|
||
}
|
||
<span className="px-3 separator">
|
||
<small title={connected ? 'Successfully connected!' : 'Can\'t connect to server'}>
|
||
{connected ?
|
||
<CheckSquareFill style={{ color: '#03b703' }} /> :
|
||
<XSquareFill style={{ color: '#e83a3a' }} />
|
||
}
|
||
</small>
|
||
</span>
|
||
<span className="float-end website" onClick={() => window.open('https://github.com/marcobaobao/yt-dlp-web-ui')}>
|
||
<Github></Github>
|
||
</span>
|
||
</div>
|
||
</footer >
|
||
);
|
||
} |