Task not found page

src/components/TaskDetail.tsx

@@ -13,6 +13,7 @@ import {
 } from "@mui/material";
 import { UserContext } from "../contexts/userContext";
 import type { User } from "../utils/types";
+import TaskNotFound from "./TaskNotFound";
 
 const TaskDetail: React.FC = () => {
 	const navigate = useNavigate();
@@ -26,7 +27,7 @@ const TaskDetail: React.FC = () => {
 
 	const taskInQuestion = tasks.find((task) => task.id === numerizedTaskId);
 
-	if (!taskInQuestion) return <div>Task not found</div>;
+	if (!taskInQuestion) return <TaskNotFound/>;
 
 	let userInQuestion: User | undefined;
 	if (users && !loading) {

src/components/TaskNotFound.tsx

@@ -0,0 +1,31 @@
+import {
+	Button,
+	Card,
+	CardContent,
+	CardHeader,
+	Stack,
+	Typography,
+} from "@mui/material";
+import { useNavigate, useParams } from "react-router-dom";
+
+const TaskNotFound: React.FC = () => {
+	const { taskId } = useParams();
+
+	const navigate = useNavigate();
+
+	return (
+		<Card>
+			<CardHeader title="Not found!" />
+			<CardContent>
+				<Stack spacing={2}>
+					<Typography>Task #{taskId} not found</Typography>
+					<Button variant="outlined" onClick={() => navigate("/")}>
+						Go back home
+					</Button>
+				</Stack>
+			</CardContent>
+		</Card>
+	);
+};
+
+export default TaskNotFound;