From 7769a4e5c543d5c5a098d9193aab0c32252a13d2 Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Wed, 10 Jul 2024 19:54:06 +0700
Subject: [PATCH] feat(home): create search bar

---
 src/components/searchBar/searchBar.tsx | 28 ++++++++++++++++++++++++++
 src/modules/home/home.tsx              | 13 ++++++++----
 2 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/components/searchBar/searchBar.tsx

diff --git a/src/components/searchBar/searchBar.tsx b/src/components/searchBar/searchBar.tsx
new file mode 100644
index 0000000..69aa17e
--- /dev/null
+++ b/src/components/searchBar/searchBar.tsx
@@ -0,0 +1,28 @@
+import React, { ChangeEvent } from 'react';
+import { Search } from 'lucide-react';
+
+interface ISearchBar {
+  query: string;
+  handleQueryChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const SearchBar: React.FC<ISearchBar> = ({ query, handleQueryChange }) => {
+  return (
+    <div className="relative flex w-full justify-center bg-slate-800 p-4">
+      <div className="relative w-full max-w-md">
+        <Search
+          size={24}
+          className="absolute left-4 top-1/2 -translate-y-1/2 transform text-slate-500"
+        />
+        <input
+          placeholder="Search"
+          className="w-full rounded-full border-2 border-slate-300 py-2 pl-12 pr-4 focus:border-slate-500"
+          value={query}
+          onChange={handleQueryChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/src/modules/home/home.tsx b/src/modules/home/home.tsx
index 802bd1a..f4f9b70 100644
--- a/src/modules/home/home.tsx
+++ b/src/modules/home/home.tsx
@@ -1,17 +1,19 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { ChangeEvent, useEffect, useState } from 'react';
 import api from '@/api/api';
 import { Movie } from '@/constant/movie';
 import Header from '@/components/header/header';
 import Backdrop from '@/components/backdrop/backdrop';
 import ListMovies from '@/components/listMovies/listMovies';
 import MyPagination from '@/components/myPagination/myPagination';
+import SearchBar from '@/components/searchBar/searchBar';
 
 const HomeModule: React.FC = () => {
   const [movies, setMovies] = useState<Movie[]>([]);
   const [backdrop, setBackdrop] = useState<string>('');
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const [query, setQuery] = useState<string>('');
 
   useEffect(() => {
     const fetchMovies = async () => {
@@ -30,7 +32,6 @@ const HomeModule: React.FC = () => {
     fetchMovies();
   }, [currentPage]);
 
-  const maxPage = 500;
   const handleClickPrev = () => {
     setCurrentPage((prevPage) => {
       if (prevPage === 1) {
@@ -41,17 +42,21 @@ const HomeModule: React.FC = () => {
   };
   const handleClickNext = () => {
     setCurrentPage((prevPage) => {
-      if (prevPage === maxPage) {
-        return maxPage;
+      if (prevPage === 500) {
+        return 500;
       }
       return prevPage + 1;
     });
   };
+  const handleQueryChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value);
+  };
 
   return (
     <div className="flex min-h-screen w-full flex-col pb-20">
       <Header />
       <Backdrop movie={movies[2]} backdrop={backdrop} />
+      <SearchBar query={query} handleQueryChange={handleQueryChange} />
       <ListMovies movies={movies} />
       <MyPagination
         currentPage={currentPage}