[feat] 404 page

src/components/errorResult/ErrorResult.jsx

@@ -0,0 +1,62 @@
+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import React from "react";
+import { Link } from "react-router-dom";
+import ErrorIllustration from "../../assets/ErrorIllustration.svg";
+
+export const ErrorResult = () => {
+ return (
+ <Box
+ sx={{
+ height: "calc(100vh - 170px)",
+ width: "100%",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ }}
+ component="section">
+ <Box
+ height="25rem"
+ width="100%"
+ alt="empty result"
+ src={ErrorIllustration}
+ component="img"></Box>
+ <Box component="section">
+ <Typography
+ sx={{
+ color: "#fff",
+ fontSize: {
+ xs: "1.2rem",
+ md: "1.5rem",
+ },
+ fontWeight: 400,
+ textAlign: "center",
+ }}
+ variant="h5"
+ component="h5">
+ Sorry, page not found.
+ </Typography>
+ <Link style={{ textDecoration: "none" }} to="/explore">
+ <Typography
+ sx={{
+ color: "#1a5bff",
+ fontSize: {
+ xs: "1rem",
+ md: "1.2rem",
+ },
+ fontWeight: 400,
+ borderBottom: "3px solid #1a5bff",
+ mx: "auto",
+ mt: "1rem",
+ width: "fit-content",
+ }}
+ variant="h5"
+ component="h5">
+ Return to Explore videos
+ </Typography>
+ </Link>
+ </Box>
+ </Box>
+ );
+};

src/components/index.jsx

@@ -14,6 +14,7 @@ import { EmptyResult } from "./emptyResult/EmptyResult";
 import { PrivateCard } from "./PrivateCard/PrivateCard";
 import { PlaylistModal } from "./playlistModal/PlaylistModal";
 import { PlaylistCard } from "./playlistCard/PlaylistCard";
+import { ErrorResult } from "./errorResult/ErrorResult";
 
 export {
  Navbar,
@@ -32,4 +33,5 @@ export {
  PrivateCard,
  PlaylistModal,
  PlaylistCard,
+ ErrorResult,
 };

src/pages/error/Error.jsx

@@ -1,5 +1,10 @@
 import React from "react";
+import { ErrorResult } from "../../components";
 
 export const Error = () => {
- return <div>404 Not Found</div>;
+ return (
+ <main className="wrapper p-1">
+ <ErrorResult />
+ </main>
+ );
 };