From 8c2e912af9c04a0f8ae044210c28655fc961b9d6 Mon Sep 17 00:00:00 2001
From: AmiltonCabral <amilton.cabral@splab.ufcg.edu.br>
Date: Wed, 28 Aug 2024 17:32:48 -0300
Subject: [PATCH] search bar

---
 src/app/search/page.tsx                     |  8 +++++++-
 src/components/SearchBar/index.tsx          | 15 ++++++++++++++
 src/components/SearchBar/profile.module.css | 22 +++++++++++++++++++++
 src/components/Title/index.tsx              |  9 ++++-----
 4 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 src/components/SearchBar/index.tsx
 create mode 100644 src/components/SearchBar/profile.module.css

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index f711207..962d95c 100644
--- a/src/app/search/page.tsx
+++ b/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>
+  );
 }
diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
new file mode 100644
index 0000000..92e4dfd
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/SearchBar/profile.module.css b/src/components/SearchBar/profile.module.css
new file mode 100644
index 0000000..cf4d017
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Title/index.tsx b/src/components/Title/index.tsx
index 67c6682..13646db 100644
--- a/src/components/Title/index.tsx
+++ b/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>