search page with popular genres

src/app/search/page.tsx

@@ -1,11 +1,41 @@
 import SearchBar from "@/components/SearchBar";
 import styles from "./search.module.css";
+import Image from "next/image";
+import Link from "next/link";
+
+const genres = [
+  "biography",
+  "classic",
+  "detective",
+  "fantasy",
+  "horror",
+  "poems",
+  "romance",
+  "sciencefiction",
+];
 
 export default function Search() {
   return (
     <main>
       <div className={styles.searchBarContainer}>
         <SearchBar placeholder="Title, author or ISBN" width="100%" />
+        <h1 className={styles.title}>Explore popular genres</h1>
+
+        <ul className={styles.genresList}>
+          {genres.map((genre) => (
+            <li key={genre} className={styles.genreItem}>
+              <Link href="#">
+                <Image
+                  src={`/img/genres/${genre}.png`}
+                  alt="Biography"
+                  width={165}
+                  height={213}
+                />
+                <p>{genre}</p>
+              </Link>
+            </li>
+          ))}
+        </ul>
       </div>
     </main>
   );

src/app/search/search.module.css

@@ -1,4 +1,37 @@
 .searchBarContainer {
   margin-top: 2rem;
   width: 70%;
+  padding-bottom: 8rem;
+}
+
+.title {
+  text-align: center;
+  margin: 4rem 0;
+}
+
+.genresList {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4rem 0;
+  justify-content: space-around;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .genresList {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.genreItem {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.genreItem a {
+  text-decoration: none;
+  color: inherit;
 }

src/components/SearchBar/index.tsx

@@ -10,7 +10,7 @@ export default function SearchBar({ placeholder, width }: SearchBarProps) {
   return (
     <div style={{ width }} className={styles.searchBar}>
       <FiSearch className={styles.icon} />
-      <input type="text" placeholder={placeholder} className={styles.input} />
+      <input type="search" placeholder={placeholder} className={styles.input} />
     </div>
   );
 }