search in person mocie and series

src/components/details/CastnCrew.js

@@ -1,15 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import { img200, noUserImg } from '../../helpers/config';
+import SearchBar from '../search/SearchBar';
 
 const CastnCrew = ({ credits, title }) => {
+  const [search, setSearch] = useState('');
+
+  const handleChange = (e) => {
+    setSearch(e.target.value);
+  };
+
+  const filtered = credits.filter((person) => {
+    return (
+      person?.name?.toLowerCase().includes(search.toLowerCase()) ||
+      person?.character?.toLowerCase().includes(search.toLowerCase())
+    );
+  });
+
   return (
     <section className="tab-section">
       <h2 className="detail-tab-title">Cast of {title}</h2>
-      {credits && credits.length > 0 ? (
+
+      <SearchBar
+        search={search}
+        handleChange={handleChange}
+        placeHolder="Search in Cast"
+        searchId="cast-search"
+      />
+
+      {credits && credits.length > 0 && filtered && filtered.length > 0 ? (
         <div className="flex justify-center items-center flex-wrap mb-6 gap-4">
-          {credits.map((credit) => (
+          {filtered.map((credit) => (
             <a href={`/person/${credit.id}`} key={uuidv4()}>
               <Cast>
                 <div className="p-2">

src/components/person/PersonCredits.js

@@ -1,20 +1,42 @@
 import React, { useEffect, useState } from 'react';
+import SearchBar from '../search/SearchBar';
 import ContentGrid from '../widget/ContentGrid';
 import Paginate from '../widget/Paginate';
 
 const PersonCredits = ({ credits, media_type }) => {
   const itemPerPage = 12;
   const [items, setItems] = useState();
   const [page, setPage] = useState(1);
+  const [search, setSearch] = useState('');
 
-  const numOfPages = Math.ceil(credits.cast.length / itemPerPage);
+  const filtered = credits.cast.filter((credit) => {
+    return (
+      credit?.title?.toLowerCase().includes(search.toLowerCase()) ||
+      credit?.name?.toLowerCase().includes(search.toLowerCase())
+    );
+  });
+
+  const numOfPages = Math.ceil(filtered.length / itemPerPage);
 
   useEffect(() => {
-    setItems(credits.cast.slice((page - 1) * itemPerPage, itemPerPage * page));
-  }, [page]);
+    setItems(filtered.slice((page - 1) * itemPerPage, itemPerPage * page));
+  }, [page, search]);
+
+  const handleChange = (e) => {
+    setSearch(e.target.value);
+  };
 
   return (
     <div className="mb-2">
+      <div className="mt-8">
+        <SearchBar
+          search={search}
+          handleChange={handleChange}
+          placeHolder={`Search in ${media_type}`}
+          searchId={`search-${media_type}`}
+        />
+      </div>
+
       {items && items.length > 0 ? (
         <ContentGrid items={items} media_type={media_type} nohover showCredit />
       ) : (

src/components/search/SearchBar.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const SearchBar = ({ search, handleChange, placeHolder, searchId }) => {
+  return (
+    <form className="max-w-[300px] mx-auto mb-5">
+      <div className="relative w-full">
+        <input
+          type="search"
+          id={searchId}
+          className="block p-3 w-full z-20 text-sm text-gray-900 bg-gray-50 border border-blue-300 focus:ring-blue-500 focus:border-blue-500 rounded-md shadow-bs5"
+          placeholder={placeHolder}
+          value={search}
+          onChange={handleChange}
+        />
+
+        <div className="absolute right-0 top-0 mt-3 mr-3">
+          <svg
+            className="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            ></path>
+          </svg>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default SearchBar;

src/components/search/SearchBarIcon.js

@@ -1,14 +1,14 @@
 import React from 'react';
 
-const SearchBarIcon = ({ onSubmit, onChange }) => {
+const SearchBarIcon = ({ onSubmit, onChange, placeHolder, searchId }) => {
   return (
     <form onSubmit={onSubmit} className="min-w-[300px]">
       <div className="relative w-full">
         <input
           type="search"
-          id="search-dropdown"
+          id={searchId}
           className="block p-3 w-full z-20 text-sm text-gray-900 bg-gray-50 border border-blue-300 focus:ring-blue-500 focus:border-blue-500 rounded-md shadow-bs5"
-          placeholder="Search Movies or TV Shows"
+          placeholder={placeHolder}
           required=""
           onChange={onChange}
         />

src/pages/search/MovieTVSearch.js

@@ -79,7 +79,12 @@ const MovieTVSearch = () => {
     <DocumentMeta {...meta} extend>
       <Container>
         <div className="mx-auto mb-5 flex gap-x-6 gap-y-8 flex-col sm:flex-row justify-center items-center w-full">
-          <SearchBarIcon onChange={onChange} onSubmit={searchSubmit} />
+          <SearchBarIcon
+            onChange={onChange}
+            onSubmit={searchSubmit}
+            placeHolder="Search for Movies and TV Series"
+            searchId="search-movie-tv"
+          />
 
           <div className="flex justify-center gap-3">
             <Tab

src/pages/search/PersonSearch.js

@@ -65,7 +65,12 @@ const PersonSearch = () => {
         <PageTitle>Search People</PageTitle>
 
         <div className="mx-auto my-5 flex gap-x-6 gap-y-8 flex-col sm:flex-row justify-center items-center w-full">
-          <SearchBarIcon onChange={onChange} onSubmit={searchSubmit} />
+          <SearchBarIcon
+            onChange={onChange}
+            onSubmit={searchSubmit}
+            placeHolder="Search for People"
+            searchId="search-person"
+          />
         </div>
 
         <div className="flex justify-center items-start flex-wrap mb-6 gap-4 mt-5">