Merge pull request #977 from SnehaTingare/searchicon

Search icon added in the searchbar of ebooks

Author: sanjay-kv

src/pages/ebooks/index.css

@@ -1,7 +1,6 @@
 /* ------------------------------
    Root Container
 ------------------------------ */
-
 .ebook-container {
   padding: 4rem 1.5rem;
   max-width: 1280px;
@@ -33,20 +32,47 @@
   margin-right: auto;
 }
 
-.ebook-search {
-  margin-top: 1.5rem;
-  padding: 0.9rem 1.3rem;
+/* ------------------------------
+   Search Wrapper + Input
+------------------------------ */
+.ebook-search-wrapper {
+  position: relative;
+  display: inline-block;
   width: 60%;
   max-width: 480px;
+  margin-top: 1.5rem;
+}
+
+.ebook-search-wrapper .search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none; /* clicks go to input */
+  font-size: 1.2rem;
+  color: var(--ifm-color-gray-700);
+  opacity: 0.6;
+}
+
+.ebook-search-wrapper input.ebook-search {
+  padding-left: 36px; /* space for the icon */
+  width: 100%;
+  height: 40px;
   border-radius: 12px;
   border: 1px solid var(--ifm-toc-border-color);
   font-size: 1rem;
   background-color: var(--ifm-background-color);
+  color: var(--ifm-color-gray-900);
   box-shadow: var(--ifm-global-shadow-lw);
   transition: all 0.25s ease;
 }
 
-.ebook-search:focus {
+.ebook-search-wrapper input.ebook-search::placeholder {
+  color: var(--ifm-color-gray-700);
+  opacity: 0.6;
+}
+
+.ebook-search-wrapper input.ebook-search:focus {
   border-color: var(--ifm-color-primary);
   box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
   outline: none;
@@ -182,12 +208,14 @@
   grid-column: 1 / -1;
 }
 
+/* ------------------------------
+   Animations
+------------------------------ */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(10px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);
@@ -199,15 +227,17 @@
     opacity: 0;
     transform: translateY(20px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
+/* ------------------------------
+   Media Queries
+------------------------------ */
 @media (max-width: 768px) {
-  .ebook-search {
+  .ebook-search-wrapper {
     width: 90%;
   }
 

src/pages/ebooks/index.tsx

@@ -79,13 +79,16 @@ export default function EbookPage(): JSX.Element {
           <p className="ebook-subtitle">
             Read high-quality ebooks on programming, tools, and development.
           </p>
-          <input
-            type="text"
-            className="ebook-search"
-            placeholder="Search ebooks..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
+          <div className="ebook-search-wrapper">
+            <span className="search-icon">🔍</span>
+            <input
+              type="text"
+              className="ebook-search"
+              placeholder="Search ebooks..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
         </div>
 
         {/* Grid Section */}