feat: show announcement

src/client/routes/index.tsx

@@ -1,4 +1,13 @@
-import { Alert, CircularProgress } from "@mui/material";
+import {
+	Alert,
+	CircularProgress,
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
+} from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
@@ -45,6 +54,30 @@ function RouteComponent() {
 	) : announcementsQuery.status === "error" ? (
 		<Alert severity="error">Error (see console)</Alert>
 	) : (
-		<pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre>
+		// <pre>{JSON.stringify(announcementsQuery.data, null, 2)}</pre>
+		<TableContainer>
+			<Table>
+				<TableHead>
+					<TableRow>
+						<TableCell />
+						<TableCell>Title</TableCell>
+						<TableCell>Text</TableCell>
+						<TableCell>Publication Date</TableCell>
+					</TableRow>
+				</TableHead>
+				<TableBody>
+					{announcementsQuery.data.map((a) => (
+						<TableRow key={a.id}>
+							<TableCell>{a.id}</TableCell>
+							<TableCell>{a.title}</TableCell>
+							<TableCell>
+								{a.text.substring(0, 50) + (a.text.length > 50 ? "..." : "")}
+							</TableCell>
+							<TableCell>{a.publication_date.toString()}</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
 	);
 }