header and add

src/client/routes/index.tsx

@@ -1,5 +1,6 @@
 import {
 	Alert,
+	Box,
 	CircularProgress,
 	Table,
 	TableBody,
@@ -7,11 +8,13 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
+	Typography,
 } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
 import z from "zod";
+import { RouterButton } from "../components/RouterButton";
 
 const Announcements = z.array(
 	z.object({
@@ -49,7 +52,17 @@ function RouteComponent() {
 	}, [announcementsQuery.error]);
 
 	// handle loading / error / show values
-	return announcementsQuery.status === "pending" ? (
+	return (
+		<Box sx={{ flexDirection: "column", display: "flex", gap: "3em" }}>
+			<Box
+				sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+			>
+				<Typography variant="h4">Announcements</Typography>
+				<RouterButton to="/" variant="contained">
+					Add announcement
+				</RouterButton>
+			</Box>
+			{announcementsQuery.status === "pending" ? (
 				<CircularProgress aria-label="Loading…" />
 			) : announcementsQuery.status === "error" ? (
 				<Alert severity="error">Error (see console)</Alert>
@@ -71,7 +84,8 @@ function RouteComponent() {
 									<TableCell>{a.id}</TableCell>
 									<TableCell>{a.title}</TableCell>
 									<TableCell>
-								{a.text.substring(0, 50) + (a.text.length > 50 ? "..." : "")}
+										{a.text.substring(0, 50) +
+											(a.text.length > 50 ? "..." : "")}
 									</TableCell>
 									<TableCell>{a.publication_date.toString()}</TableCell>
 								</TableRow>
@@ -79,5 +93,7 @@ function RouteComponent() {
 						</TableBody>
 					</Table>
 				</TableContainer>
+			)}
+		</Box>
 	);
 }