Merge pull request #16 from BookHive-ufcg/feat/search-bar

Search bar

src/app/search/page.tsx

@@ -1,3 +1,9 @@
+import SearchBar from "@/components/SearchBar";
+
 export default function Search() {
-  return <main></main>;
+  return (
+    <main>
+      <SearchBar placeholder="Title, author or ISBN" />
+    </main>
+  );
 }

src/components/SearchBar/index.tsx

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

src/components/SearchBar/profile.module.css

@@ -0,0 +1,22 @@
+.searchBar {
+  display: flex;
+  align-items: center;
+  background-color: #d3d3d3;
+  border-radius: 12px;
+  padding: 10px 15px;
+  width: 300px;
+}
+
+.icon {
+  color: #555;
+  font-size: 24px;
+  margin-right: 10px;
+}
+
+.input {
+  border: none;
+  background-color: transparent;
+  outline: none;
+  font-size: 16px;
+  color: #555;
+}

src/components/Title/index.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import styles from "./title.module.css";
 import BookSection from "../BookSection";
 
-export default function Title({
-  titleText,
-  subTitleText,
-}: {
+type TitleProps = {
   titleText: string;
   subTitleText: string;
-}) {
+};
+
+export default function Title({ titleText, subTitleText }: TitleProps) {
   return (
     <div className={styles.title}>
       <h1 className={styles.titleText}>{titleText}</h1>