70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { useRef, useState } from 'react';
|
|
import { IconCloudUpload, IconDownload, IconX } from '@tabler/icons-react';
|
|
import { Button, Group, Text, useMantineTheme } from '@mantine/core';
|
|
import { Dropzone } from '@mantine/dropzone';
|
|
import classes from './AirportDrop.module.css';
|
|
import { importAirports } from '@lib/airport.ts';
|
|
|
|
export function AirportDrop() {
|
|
const theme = useMantineTheme();
|
|
const openRef = useRef<() => void>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
return (
|
|
<div className={classes.wrapper}>
|
|
<Dropzone
|
|
loading={loading}
|
|
openRef={openRef}
|
|
onDrop={async (files) => {
|
|
if (files.length === 0) return;
|
|
setLoading(true);
|
|
try {
|
|
const formData = new FormData();
|
|
files.forEach((file) => {
|
|
formData.append('files', file, file.name);
|
|
});
|
|
await importAirports(formData);
|
|
} catch (error) {
|
|
console.error('Upload error:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
className={classes.dropzone}
|
|
radius='md'
|
|
accept={['application/JSON']}
|
|
maxSize={30 * 1024 ** 2}
|
|
>
|
|
<div style={{ pointerEvents: 'none' }}>
|
|
<Group justify='center'>
|
|
<Dropzone.Accept>
|
|
<IconDownload size={50} color={theme.colors.blue[6]} stroke={1.5} />
|
|
</Dropzone.Accept>
|
|
<Dropzone.Reject>
|
|
<IconX size={50} color={theme.colors.red[6]} stroke={1.5} />
|
|
</Dropzone.Reject>
|
|
<Dropzone.Idle>
|
|
<IconCloudUpload size={50} stroke={1.5} className={classes.icon} />
|
|
</Dropzone.Idle>
|
|
</Group>
|
|
|
|
<Text ta='center' fw={700} fz='lg' mt='xl'>
|
|
<Dropzone.Accept>Drop files here</Dropzone.Accept>
|
|
<Dropzone.Reject>Json file less than 30mb</Dropzone.Reject>
|
|
<Dropzone.Idle>Upload JSON</Dropzone.Idle>
|
|
</Text>
|
|
|
|
<Text className={classes.description}>
|
|
Drag'n'drop files here to upload. We can accept only <i>.json</i> files that are less than 30mb in
|
|
size.
|
|
</Text>
|
|
</div>
|
|
</Dropzone>
|
|
|
|
<Button className={classes.control} size='md' radius='xl' onClick={() => openRef.current?.()}>
|
|
Select files
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|