fix (#5)

Author: devsdenepal

src/App.css

@@ -43,3 +43,13 @@ background: rgb(186 22 163) !important;
     transform: rotate(360deg);
   }
 }
+/* Default state for search input */
+.input-group .form-control {
+  width: 150px;
+  transition: width 0.3s ease-in-out;
+}
+
+/* Expanded state when the input is focused */
+.search-expanded .form-control {
+  width: 300px; /* You can adjust this width */
+}

src/components/Navbar.jsx

@@ -17,7 +17,7 @@ function Navbar({ loggedin }) {
     if (searchTerm) {
       // Redirect to the search results page with the search term
       navigate(`/search?query=${encodeURIComponent(searchTerm)}`);
-      setSearchTerm(''); // Clear the input after submission
+      // setSearchTerm(''); // Clear the input after submission
     }
   };
 
@@ -55,13 +55,23 @@ function Navbar({ loggedin }) {
           </ul>
           <div className="d-flex align-items-center flex-column flex-lg-row">
             <form className="me-2 mb-2 mb-lg-0" onSubmit={handleSearchSubmit}>
-              <input 
-                type="text" 
-                className="form-control form-control-sm" 
-                placeholder="Search" 
-                value={searchTerm} 
-                onChange={handleSearchChange} 
-              />
+              <div class="input-group">
+                <span class="input-group-text" id="basic-addon1">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
+                  </svg>
+                </span>
+                {/* <input type="text" class="form-control" placeholder="Input group example" /> */}
+          
+              <input
+                type="text"
+                className="form-control"
+                //  aria-label="Input group example" 
+                //  aria-describedby="basic-addon1"
+                placeholder="Search"
+                value={searchTerm}
+                onChange={handleSearchChange}
+              />  </div>
             </form>
             {loggedin === 'true' ? (
               <Link className="btn btn-primary clk" to="/profile">Profile </Link>

src/components/search.jsx

@@ -2,16 +2,17 @@ import React from 'react';
 import { useLocation } from 'react-router-dom';
 import courses from './courseData'; // Ensure the path is correct
 import { Link } from 'react-router-dom';
+
 const useQuery = () => {
   return new URLSearchParams(useLocation().search);
 };
 
 function SearchResults() {
   const query = useQuery();
   const searchTerm = query.get('query')?.toLowerCase() || '';
-  
+
   // Filter courses based on the search term
-  const filteredCourses = Object.values(courses).filter(course =>
+  const filteredCourses = Object.entries(courses).filter(([key, course]) =>
     course.title.toLowerCase().includes(searchTerm) ||
     course.description.toLowerCase().includes(searchTerm)
   );
@@ -20,10 +21,11 @@ function SearchResults() {
     <div className="container mt-5">
       <h2>Search Results for "{searchTerm}"</h2>
       <div className="row row-cols-1 row-cols-md-3 g-3">
-          {Object.entries(courses).map(([key, course], index) => (
+        {filteredCourses.length > 0 ? (
+          filteredCourses.map(([key, course], index) => (
             <div className="col" key={index}>
               <div className="card h-100">
-                <Link to={`/courses/${key}`} className='lnk'>
+                <Link to={`/courses/${key}`} className="lnk">
                   <img src={course.image} className="card-img-top" alt={course.title} />
                   <div className="card-body">
                     <h5 className="card-title">{course.title}</h5>
@@ -32,9 +34,12 @@ function SearchResults() {
                 </Link>
               </div>
             </div>
-          ))}
-        </div>
+          ))
+        ) : (
+          <p>No courses match your search term.</p>
+        )}
       </div>
+    </div>
   );
 }