From ec5a4c350b55e8e0d6912bb18bbec14b8ce9897a Mon Sep 17 00:00:00 2001
From: soniya malviya <soniyamalviya@soniyas-MacBook-Pro.local>
Date: Thu, 30 May 2024 18:13:46 +0530
Subject: [PATCH] add search icon

---
 .idea/.gitignore |  5 +++++
 index.html       | 10 +++++++++-
 style.css        | 30 +++++++++++++++++++++++++++++-
 3 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 .idea/.gitignore

diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 00000000..b58b603f
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/index.html b/index.html
index e934d77e..118ad48b 100644
--- a/index.html
+++ b/index.html
@@ -74,11 +74,19 @@ <h3 class="sub-head">Every component, on the right place!!</h3>
 
     <div class="container" id="components">
         <!-- Search Bar -->
+<!--        <div id="searchBar">-->
+<!--            <h1>Search Component</h1><br>-->
+<!--            <input type="text" id="componentSearch" placeholder="Enter Component Name" oninput="filterComponents()">-->
+<!--        </div>-->
         <div id="searchBar">
             <h1>Search Component</h1><br>
-            <input type="text" id="componentSearch" placeholder="Enter Component Name" oninput="filterComponents()">
+            <div class="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Component Name" oninput="filterComponents()">
+                <span class="search-icon"><i class="fa fa-search"></i></span>
+            </div>
         </div>
 
+
         <a href="./assets/html_files/accordions.html" target="_blank">
             <div class="zoom-effect">
                 <div class="box">
diff --git a/style.css b/style.css
index 76069744..6ce49006 100644
--- a/style.css
+++ b/style.css
@@ -920,4 +920,32 @@ footer p a {
         width: 280px !important;
         margin: 15px !important;
     }
-}
\ No newline at end of file
+}
+#searchBar {
+    text-align: center; /* Center the content within the search bar */
+}
+
+.search-container {
+    position: relative;
+    display: inline-block; /* Allow it to resize based on content */
+}
+
+#componentSearch {
+    width: 100%;
+    padding: 10px;
+    padding-left: 35px; /* Adjust the padding to make space for the icon */
+    box-sizing: border-box; /* Include padding in the element's total width and height */
+}
+
+.search-icon {
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none; /* Ensure the icon does not block input clicks */
+    color: #888; /* Adjust the color as needed */
+}
+
+.search-icon i {
+    font-size: 16px; /* Adjust the icon size as needed */
+}