Refactor search

README.md

@@ -16,8 +16,6 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
@@ -31,6 +29,6 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The main branch is automatically deployed to [BookHive](https://thebookhive.vercel.app/) with [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) the creator of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

src/app/globals.css

@@ -7,10 +7,12 @@
   --font-color-secondary: #4a4545;
 
   --color-primary: #ffdd4b;
+  --color-grey: #555;
 
   --background-primary: #fffce0;
   --background-secondary: #ffffff;
   --background-tertiary: #e7e7e7;
+  --background-grey: #d3d3d3;
 }
 
 * {

src/app/search/page.tsx

@@ -1,9 +1,12 @@
 import SearchBar from "@/components/SearchBar";
+import styles from "./search.module.css";
 
 export default function Search() {
   return (
     <main>
-      <SearchBar placeholder="Title, author or ISBN" />
+      <div className={styles.searchBarContainer}>
+        <SearchBar placeholder="Title, author or ISBN" width="100%" />
+      </div>
     </main>
   );
 }

src/app/search/search.module.css

@@ -0,0 +1,4 @@
+.searchBarContainer {
+  margin-top: 2rem;
+  width: 70%;
+}

src/components/SearchBar/index.tsx

@@ -1,13 +1,14 @@
 import { FiSearch } from "react-icons/fi";
-import styles from "./profile.module.css";
+import styles from "./search-bar.module.css";
 
 type SearchBarProps = {
   placeholder?: string;
+  width?: string;
 };
 
-export default function SearchBar({ placeholder }: SearchBarProps) {
+export default function SearchBar({ placeholder, width }: SearchBarProps) {
   return (
-    <div className={styles.searchBar}>
+    <div style={{ width }} className={styles.searchBar}>
       <FiSearch className={styles.icon} />
       <input type="text" placeholder={placeholder} className={styles.input} />
     </div>

src/components/SearchBar/profile.module.css → src/components/SearchBar/search-bar.module.css

@@ -1,10 +1,9 @@
 .searchBar {
   display: flex;
   align-items: center;
-  background-color: #d3d3d3;
+  background-color: var(--background-grey);
   border-radius: 12px;
   padding: 10px 15px;
-  width: 300px;
 }
 
 .icon {
@@ -18,5 +17,6 @@
   background-color: transparent;
   outline: none;
   font-size: 16px;
-  color: #555;
+  width: 100%;
+  color: var(--color-grey);
 }