added searchbar

SchoolOfCode · Sep 25, 2024 · b349867 · b349867
1 parent 6e5c72a
commit b349867
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 41 deletions.
diff --git a/my-next-app/src/components/Header/Header.module.css b/my-next-app/src/components/Header/Header.module.css
@@ -15,9 +15,9 @@
   font-size: 1.2rem; /* Set font size */
   color: #fff; /* Set text color */
   letter-spacing: 0.2em;
-  flex: 1;/* Allow title to take available space */
-  white-space: nowrap;/* Prevent title from wrapping to next line */
-  text-overflow: ellipsis;/* Show ellipsis for overflow text */
+  flex: 1; /* Allow title to take available space */
+  white-space: nowrap; /* Prevent title from wrapping to next line */
+  text-overflow: ellipsis; /* Show ellipsis for overflow text */
   transition: opacity 0.3s;
   display: block;
 }
@@ -37,17 +37,20 @@
   justify-content: center; /* Center the icon horizontally */
   outline: none; /* Remove default outline on focus */
   margin-left: 15px; /* Add space between title and button */
-  transition: margin-left 0.3s ease, transform 0.3s ease;
+  transition:
+    margin-left 0.3s ease,
+    transform 0.3s ease;
   position: relative;
   z-index: 2; /* Ensure the button stays above the search bar */
 }
 
-
 .searchButton svg {
   width: 24px; /* Set SVG width */
   height: 24px; /* Set SVG height */
-  transition: fill 0.3s, stroke 0.3s;
-   /* Smooth transition for hover effect */
+  transition:
+    fill 0.3s,
+    stroke 0.3s;
+  /* Smooth transition for hover effect */
 }
 
 .iconFill {
@@ -67,9 +70,9 @@
 }
 
 .searchButton:focus {
-/* /added to prevent the box of the button from having an outline when clicked,
+  /* /added to prevent the box of the button from having an outline when clicked,
 if you want to see the button being clicked add colour etc as needed. */
-  box-shadow: none
+  box-shadow: none;
 }
 
 .searchButton:focus .iconStroke {
@@ -88,4 +91,4 @@ if you want to see the button being clicked add colour etc as needed. */
 /* Adjust header's justify-content when search is active */
 .searchActiveHeader {
   justify-content: flex-start; /* Align items to the left */
-}
+}
diff --git a/my-next-app/src/components/Header/SearchBar.module.css b/my-next-app/src/components/Header/SearchBar.module.css
@@ -1,52 +1,52 @@
 /* my-next-app/src/components/SearchBar.module.css */
 
 .searchBar {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    margin-left: 50px; /* Add space to the left to accommodate the shifted button */
-    transition: opacity 0.3s ease;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-left: 50px; /* Add space to the left to accommodate the shifted button */
+  transition: opacity 0.3s ease;
 }
 
 .input {
-    flex: 1;
-    padding: 8px 12px;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    outline: none;
-    background: #fff;
-    color: #000;
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  outline: none;
+  background: #fff;
+  color: #000;
 }
 
 .closeButton {
-    background: transparent;
-    border: none;
-    color: #fff;
-    font-size: 1.2rem;
-    cursor: pointer;
-    margin-left: 8px;
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 1.2rem;
+  cursor: pointer;
+  margin-left: 8px;
 }
 
 .submitButton {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    margin-left: 8px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  margin-left: 8px;
 }
 
 /* Responsive Styles */
 @media (max-width: 600px) {
-    .searchBar {
-        margin-left: 40px; /* Adjust spacing for smaller screens */
-    }
+  .searchBar {
+    margin-left: 40px; /* Adjust spacing for smaller screens */
+  }
 
-    .input {
-        font-size: 0.9rem;
-    }
+  .input {
+    font-size: 0.9rem;
+  }
 }
 
 /* Optional: Style for the placeholder text */
 .input::placeholder {
-    color: #888; /* Sets placeholder text color to a shade of gray */
-}
+  color: #888; /* Sets placeholder text color to a shade of gray */
+}