53 lines
1.2 KiB
TypeScript
Executable File
53 lines
1.2 KiB
TypeScript
Executable File
import { Box, Typography, useTheme } from "@mui/material";
|
|
import { SxProps, Theme } from "@mui/material/styles";
|
|
|
|
import type { DragEvent } from "react";
|
|
|
|
interface Props {
|
|
sx?: SxProps<Theme>;
|
|
icon: React.ReactNode;
|
|
handleDrop?: (event: DragEvent<HTMLDivElement>) => void;
|
|
text?: string;
|
|
ref?: any;
|
|
}
|
|
|
|
export default function UploadBox({ sx, icon, text, ref, handleDrop }: Props) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Box
|
|
onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
|
|
onDrop={handleDrop}
|
|
ref={ref}
|
|
sx={{
|
|
width: "100%",
|
|
height: "120px",
|
|
position: "relative",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: theme.palette.background.default,
|
|
border: `1px solid ${theme.palette.grey2.main}`,
|
|
borderRadius: "8px",
|
|
...sx,
|
|
}}
|
|
>
|
|
{icon}
|
|
|
|
<Typography
|
|
sx={{
|
|
position: "absolute",
|
|
right: "10px",
|
|
bottom: "10px",
|
|
color: theme.palette.orange.main,
|
|
fontSize: "16px",
|
|
lineHeight: "19px",
|
|
textDecoration: "underline",
|
|
}}
|
|
>
|
|
{text}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|