add component and solution for search without result

src/App.css

@@ -229,6 +229,37 @@ nav ul li a:hover {
   border-left: 2px solid var(--text_light);
   color: var(--text_light);
 }
+
+/* ==============================
+        No Search Result
+============================== */
+
+.NoResult {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  margin: 40px 0;
+}
+
+.NoResult svg {
+  fill: var(--article_bg);
+  width: 150px;
+}
+
+.NoResult h2 {
+  color: var(--accent);
+  font-size: 45px;
+}
+
+.NoResult p {
+  color: var(--text);
+}
+
+.NoResult p span {
+  color: var(--accent);
+}
+
 /* ==============================
             Article
 ============================== */

src/App.jsx

@@ -42,6 +42,7 @@ function App() {
         setHitsPerPage={setHitsPerPage}
         setPageNum={setPageNum}
         loading={loading}
+        query={query}
       />
       <Footer />
       <Reagan />

src/components/Body.jsx

@@ -2,9 +2,11 @@ import Search from "./Search";
 import Pagination from "./Pagination";
 import { useEffect, useState, CSSProperties } from "react";
 import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
+import NoResult from "./NoResult";
 
-export default function Body({ fetchedData, setQuery, loading }) {
+export default function Body({ fetchedData, setQuery, loading, query }) {
   const [hits, setHits] = useState([]);
+  const [noHits, setNoHits] = useState(false);
 
   const override = {
     display: "block",
@@ -13,11 +15,17 @@ export default function Body({ fetchedData, setQuery, loading }) {
 
   useEffect(() => {
     if (fetchedData.hits) setHits(fetchedData.hits);
+    if (fetchedData.nbHits === 0) {
+      setNoHits(true);
+    }
   }, [fetchedData]);
 
+  console.log(fetchedData);
+
   return (
     <div className="Body">
       <Search fetchedData={fetchedData} setQuery={setQuery} />
+      {noHits ? <NoResult query={query} /> : null}
       <ClimbingBoxLoader
         color="var(--accent)"
         loading={loading}

src/components/NoResult.jsx

@@ -0,0 +1,15 @@
+export default function NoResult(query) {
+  return (
+    <div className="NoResult">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM174.6 384.1c-4.5 12.5-18.2 18.9-30.7 14.4s-18.9-18.2-14.4-30.7C146.9 319.4 198.9 288 256 288s109.1 31.4 126.6 79.9c4.5 12.5-2 26.2-14.4 30.7s-26.2-2-30.7-14.4C328.2 358.5 297.2 336 256 336s-72.2 22.5-81.4 48.1zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
+      </svg>
+      <div className="NoResult_txt">
+        <h2>Nothing found</h2>
+        <p>
+          Search for <span>{query.query}</span>, didn't found any articls!
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/Pagination.jsx

@@ -40,7 +40,6 @@ export default function Pagination({ itemsPerPage, hits, setHits }) {
   // (This could be items from props; or items loaded in a local state
   // from an API endpoint with useEffect and useState)
   const endOffset = itemOffset + itemsPerPage;
-  console.log(`Loading items from ${itemOffset} to ${endOffset}`);
   const currentItems = items.slice(itemOffset, endOffset);
   const pageCount = Math.ceil(items.length / itemsPerPage);
 
@@ -51,6 +50,7 @@ export default function Pagination({ itemsPerPage, hits, setHits }) {
       `User requested page number ${event.selected}, which is offset ${newOffset}`
     );
     setItemOffset(newOffset);
+    console.log(items);
   };
 
   return (