emotion search design

BookHive-ufcg · Sep 22, 2024 · 021bcec · 021bcec
1 parent d27dbe4
commit 021bcec
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -18,7 +18,7 @@ export default function Search() {
   return (
     <main>
       <div className={styles.searchBarContainer}>
-        <SearchBar placeholder="Title, author or ISBN" width="100%" />
+        <SearchBar placeholder="Title, author or ISBN" />
         <h1 className={styles.title}>Explore popular genres</h1>
 
         <ul className={styles.genresList}>
@@ -27,15 +27,22 @@ export default function Search() {
               <Link href="#">
                 <Image
                   src={`/img/genres/${genre}.png`}
-                  alt="Biography"
+                  alt={genre}
                   width={165}
                   height={213}
                 />
-                <p>{genre}</p>
+                <p className={styles.genreName}>{genre}</p>
               </Link>
             </li>
           ))}
         </ul>
+
+        <hr />
+
+        <h1 className={styles.title}>Search books by emotion</h1>
+        <div className={styles.emotionSearchContainer}>
+          <SearchBar placeholder="Type your emotion" />
+        </div>
       </div>
     </main>
   );

diff --git a/src/app/search/search.module.css b/src/app/search/search.module.css
@@ -7,6 +7,8 @@
 .title {
   text-align: center;
   margin: 4rem 0;
+  font-size: 3rem;
+  font-weight: 400;
 }
 
 .genresList {
@@ -15,6 +17,7 @@
   gap: 4rem 0;
   justify-content: space-around;
   text-align: center;
+  margin-bottom: 8rem;
 }
 
 @media (max-width: 768px) {
@@ -35,3 +38,18 @@
   text-decoration: none;
   color: inherit;
 }
+
+.genreName {
+  font-size: 1.3rem;
+}
+
+.emotionSearchContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 20rem;
+}
+
+.emotionSearchContainer div {
+  width: min(40rem, 100%);
+}
diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
@@ -3,12 +3,11 @@ import styles from "./search-bar.module.css";
 
 type SearchBarProps = {
   placeholder?: string;
-  width?: string;
 };
 
-export default function SearchBar({ placeholder, width }: SearchBarProps) {
+export default function SearchBar({ placeholder }: SearchBarProps) {
   return (
-    <div style={{ width }} className={styles.searchBar}>
+    <div className={styles.searchBar}>
       <FiSearch className={styles.icon} />
       <input type="search" placeholder={placeholder} className={styles.input} />
     </div>