frontend/src/components/inputs/DropContent.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import {
  faArrowUp,
  faFileCirclePlus,
  faXmark,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Group, Stack, Text, createStyles } from "@mantine/core";
import { Dropzone } from "@mantine/dropzone";
import { FunctionComponent } from "react";

const useStyle = createStyles((theme) => {
  return {
    container: {
      pointerEvents: "none",
      minHeight: 220,
    },
  };
});

export const DropContent: FunctionComponent = () => {
  const { classes } = useStyle();

  return (
    <Group position="center" spacing="xl" className={classes.container}>
      <Dropzone.Idle>
        <FontAwesomeIcon icon={faFileCirclePlus} size="2x" />
      </Dropzone.Idle>
      <Dropzone.Accept>
        <FontAwesomeIcon icon={faArrowUp} size="2x" />
      </Dropzone.Accept>
      <Dropzone.Reject>
        <FontAwesomeIcon icon={faXmark} size="2x" />
      </Dropzone.Reject>
      <Stack spacing={0}>
        <Text size="lg">Upload Subtitles</Text>
        <Text color="dimmed" size="sm">
          Attach as many files as you like, you will need to select file
          metadata before uploading
        </Text>
      </Stack>
    </Group>
  );
};