feat: add entries

src/client/routes/add/index.tsx

@@ -1,6 +1,27 @@
-import { Box, FormLabel, TextareaAutosize, TextField } from "@mui/material";
+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,
@@ -10,6 +31,9 @@ function RouteComponent() {
 	return (
 		<Box
 			component="form"
+			enctype="multipart/form-data"
+			action="/api/announcements/add"
+			method="POST"
 			sx={{
 				display: "flex",
 				flexDirection: "column",
@@ -18,10 +42,28 @@ function RouteComponent() {
 			noValidate
 			autoComplete="off"
 		>
-			<TextField label="Title"></TextField>
+			<TextField name="title" label="Title"></TextField>
 			<FormLabel>Text:</FormLabel>
-			<TextareaAutosize minRows={6}></TextareaAutosize>
-			<DatePicker />
+			<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>
 	);
 }