[Feature Request]: Add No Results text deisplay on search results

src/components/noResultsFound/index.css

@@ -0,0 +1,16 @@
+.bg-container{
+    display: flex;
+    flex-direction: column;
+    height: 50vh;
+    justify-content: center;
+    align-items: center;
+}
+
+.bg-container h1{
+    font-size: 30px;
+    color: rgb(36, 36, 36);
+}
+
+.bg-container p{
+    color: #757575;
+}

src/components/noResultsFound/index.js

@@ -0,0 +1,11 @@
+import './index.css'
+const NoResultsFound = () => {
+    return(
+        <div className='bg-container'>
+            <h1>No Result Found</h1>
+            <p>We can't find any item item matching your search</p>
+        </div>
+    )
+}
+
+export default NoResultsFound

src/components/page4/lecture.js

@@ -12,6 +12,7 @@ import wt from '../../assets/wt.jpg';
 import se from '../../assets/se.jpg';
 import bd from '../../assets/bd.jpg';
 import {FaMagnifyingGlass } from 'react-icons/fa6'
+import NoResultsFound from '../noResultsFound/index.js'
 
 function Lecture() {
   // State for search query
@@ -56,6 +57,7 @@ function Lecture() {
         />
       </div>
       {/* Display filtered lecture items */}
+      { filteredItems.length !== 0 ?
       <div className="container">
         {filteredItems.map((item, index) => (
           <div className="box" key={index}>
@@ -67,6 +69,7 @@ function Lecture() {
           </div>
         ))}
       </div>
+      : <NoResultsFound />}
     </div>
   );
 }

src/components/page4/trdquantum.js

@@ -10,6 +10,7 @@ import Imgcn from '../../assets/cn.webp';
 import Imgwt from '../../assets/wt.png';
 import Imgitcs from '../../assets/itcsimg.jpg';
 import {FaMagnifyingGlass } from 'react-icons/fa6'
+import NoResultsFound from '../noResultsFound/index.js'
 const quantumBooks = [
   { img: Imgcd, title: "Compiler Design", file: "cd" },
   { img: Imgda, title: "Data Analytics", file: "DataAnalytics" },
@@ -66,7 +67,7 @@ function Quantum() {
 
 </div>
 
-        <div className="content" style={{ height: "auto", overflow: "auto" }}>
+        { filteredBooks.length !== 0 ? <div className="content" style={{ height: "auto", overflow: "auto" }}>
           {filteredBooks.map(book => (
             <div className="book" key={book.title}>
               <img src={book.img} alt={book.title} />
@@ -76,7 +77,7 @@ function Quantum() {
               </div>
             </div>
           ))}
-        </div>
+        </div> : <NoResultsFound />}
       </div>
     </div>
   )

src/components/page5(1st)/fstlecture.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Header from '../../pages/header';
 import './fstlecture.css';
+import NoResultsFound from '../noResultsFound/index.js'
 
 // Import images
 import ec from '../../assets/ec.jpg';
@@ -62,7 +63,7 @@ function Lecture() {
         />
       </div>
       {/* Display filtered lecture items */}
-      <div className="container">
+      {  filteredItems.length !== 0 ? <div className="container">
         {filteredItems.map((item, index) => (
           <div className="box" key={index}>
             <div className="upper">
@@ -72,7 +73,7 @@ function Lecture() {
             <a href={item.link}>View Content</a>
           </div>
         ))}
-      </div>
+      </div> : <NoResultsFound /> }
     </div>
   );
 }

src/components/page5(1st)/fstquantum.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import NoResultsFound from '../noResultsFound/index.js'
 import Header from '../../pages/header.js';
 import Aquantum from '../../assets/5th.png';
 import Imgphy from '../../assets/physics.webp';
@@ -66,7 +67,7 @@ function Quantum() {
   onChange={(e) => setSearchQuery(e.target.value)}
 />
 </div>
-        <div className="content" style={{ height: "auto" }}>
+        { filteredBooks.length !== 0 ? <div className="content" style={{ height: "auto" }}>
           {filteredBooks.map(book => (
             <div className="book" key={book.title}>
               <img src={book.img} alt={book.title} />
@@ -76,7 +77,7 @@ function Quantum() {
               </div>
             </div>
           ))}
-        </div>
+        </div> : <NoResultsFound />}
       </div>
     </div>
   );

src/components/page6(2nd)/sndlecture.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Header from '../../pages/header';
-
+import NoResultsFound from '../noResultsFound/index.js'
 import Imgmath4 from '../../assets/lmath4.jpg';
 import Imgdsa from '../../assets/ldsa.jpg';
 import Imgcoa from '../../assets/lcoa.jpg';
@@ -61,7 +61,7 @@ function SndLecture() {
 </div>
       <div style={{ margin: '20px' }}>
       </div>
-      <div className="container">
+      { filteredLectures.length !== 0 ? <div className="container">
         {filteredLectures.map((lecture) => (
           <div className="box" key={lecture.title}>
             <div className="upper">
@@ -73,7 +73,7 @@ function SndLecture() {
             </a>
           </div>
         ))}
-      </div>
+      </div> : <NoResultsFound />}
     </div>
   );
 }

src/components/page6(2nd)/sndquantum.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import NoResultsFound from '../noResultsFound/index.js'
 import '../page6(2nd)/sndquantum.css';
 import Header from '../../pages/header.js';
 import Aquantum from '../../assets/5th.png';
@@ -14,6 +15,7 @@ import Imguhv from '../../assets/uhv.jpg';
 import Imgos from '../../assets/os.jpg';
 import Imgtafl from '../../assets/autometa.png';
 import {FaMagnifyingGlass } from 'react-icons/fa6'
+import { FilterBAndW } from '@mui/icons-material';
 
 const books = [
   { img: Imgmath4, title: "Engineering Math4", file: "Mathematics4" },
@@ -69,7 +71,7 @@ function SndQuantum() {
   onChange={(e) => setSearchQuery(e.target.value)}
 />
 </div>
-        <div className="content" style={{ height: "auto" }}>
+         {filteredBooks.length !== 0 ? <div className="content" style={{ height: "auto" }}>
           {filteredBooks.map(book => (
             <div className="book" key={book.title}>
               <img src={book.img} alt={book.title} />
@@ -79,7 +81,7 @@ function SndQuantum() {
               </div>
             </div>
           ))}
-        </div>
+        </div> : <NoResultsFound />}
       </div>
     </div>
   );