Error Page Component added

src/App.js

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import Profile from "./components/Profile/Profile";
 import Search from "./components/Search/Search";
 import Sidebar from "./components/Sidebar/Sidebar";
+import ErrorPage from "./components/ErrorPage/ErrorPage";
 import NoResultFound from "./components/NoResultFound/NoResultFound";
 import "./App.css";
 import filenames from "./ProfilesList.json";
@@ -10,7 +11,7 @@ function App() {
   const [profiles, setProfiles] = useState([]);
   const [searching, setSearching] = useState(false);
   const [combinedData, setCombinedData] = useState([]);
-
+  const currentUrl = window.location.pathname
   useEffect(() => {
     // Function to fetch data from a JSON file
     const fetchData = async (file) => {
@@ -72,22 +73,25 @@ function App() {
   };
 
   const shuffledProfiles = shuffleProfiles(combinedData);
-
   return (
     <div className="App">
       <Sidebar />
-      <Search onSearch={handleSearch} />
-      {profiles.length === 0 && searching ? (
-        <NoResultFound />
-      ) : profiles.length === 0 && !searching ? (
-        shuffledProfiles.map((profile, index) => {
-          return <Profile data={profile} key={index} />;
-        })
-      ) : (
-        profiles.map((profile, index) => {
-          return <Profile data={profile} key={index} />;
-        })
-      )}
+      {currentUrl === '/' ? <>
+        <Search onSearch={handleSearch} />
+        {profiles.length === 0 && searching ? (
+          <NoResultFound />
+        ) : profiles.length === 0 && !searching ? (
+          shuffledProfiles.map((profile, index) => {
+            return <Profile data={profile} key={index} />;
+          })
+        ) : (
+          profiles.map((profile, index) => {
+            return <Profile data={profile} key={index} />;
+          })
+        )}
+      </> : <ErrorPage />}
+
+
     </div>
   );
 }

src/components/ErrorPage/ErrorPage.css

@@ -0,0 +1,20 @@
+.error-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.error-page-content {
+  text-align: center;
+  color: #fff;
+}
+
+.error-page-content h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.error-page-content p {
+  font-size: 1.5rem;
+}

src/components/ErrorPage/ErrorPage.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import './ErrorPage.css'
+
+const ErrorPage = () => {
+    return <div className="error-page">
+        <div className="error-page-content">
+            <h1>404 - Page Not Found</h1>
+            <p>Oops! The page you're looking for does not exist.</p>
+            <p>Please check the Url.</p>
+        </div>
+    </div>;
+};
+
+export default ErrorPage;