redglow
70 lines
1.5 KiB
TypeScript
70 lines
1.5 KiB
TypeScript
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
|
import {
|
|
Box,
|
|
Button,
|
|
FormLabel,
|
|
styled,
|
|
TextareaAutosize,
|
|
TextField,
|
|
} from "@mui/material";
|
|
import { DatePicker } from "@mui/x-date-pickers";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
import type { ChangeEvent } from "react";
|
|
|
|
const VisuallyHiddenInput = styled("input")({
|
|
clip: "rect(0 0 0 0)",
|
|
clipPath: "inset(50%)",
|
|
height: 1,
|
|
overflow: "hidden",
|
|
position: "absolute",
|
|
bottom: 0,
|
|
left: 0,
|
|
whiteSpace: "nowrap",
|
|
width: 1,
|
|
});
|
|
|
|
export const Route = createFileRoute("/add/")({
|
|
component: RouteComponent,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
return (
|
|
<Box
|
|
component="form"
|
|
enctype="multipart/form-data"
|
|
action="/api/announcements"
|
|
method="POST"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
"& > :not(style)": { m: 1, width: "25ch" },
|
|
}}
|
|
noValidate
|
|
autoComplete="off"
|
|
>
|
|
<TextField name="title" label="Title"></TextField>
|
|
<FormLabel>Text:</FormLabel>
|
|
<TextareaAutosize name="text" minRows={6}></TextareaAutosize>
|
|
<DatePicker name="publication_date" />
|
|
<Button
|
|
component="label"
|
|
variant="contained"
|
|
tabIndex={-1}
|
|
startIcon={<CloudUploadIcon />}
|
|
>
|
|
Upload files
|
|
<VisuallyHiddenInput
|
|
type="file"
|
|
name="image"
|
|
onChange={(event: ChangeEvent<HTMLInputElement>) =>
|
|
console.log(event.target.files)
|
|
}
|
|
/>
|
|
</Button>
|
|
<Button variant="contained" type="submit">
|
|
Submit
|
|
</Button>
|
|
</Box>
|
|
);
|
|
}
|