From ee4731465845444317d738624ea4a3fa802239ed Mon Sep 17 00:00:00 2001
From: hamed Hosseini <genius.ha@gmail.com>
Date: Fri, 2 May 2025 14:14:10 +0330
Subject: [PATCH] feat: Add search by name and specialty card navigation

- Implemented search functionality to filter specialties by name
- Added navigation to /doctors page with specialty ID as query parameter when clicking on a specialty card
- Enhanced user experience by providing real-time search results and clear navigation path
---
 components/searchHead/SmSearch.js             |  9 ++++-
 components/specialties/index.js               | 24 +++++++++++-
 .../specialties/list/ItemSpecialties.js       |  8 ++++
 components/specialties/list/index.js          | 37 +++++++++++--------
 4 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/components/searchHead/SmSearch.js b/components/searchHead/SmSearch.js
index e9c1001..fd5048e 100644
--- a/components/searchHead/SmSearch.js
+++ b/components/searchHead/SmSearch.js
@@ -1,7 +1,13 @@
 import SearchD from "@/components/icons/SearchD";
 import { Button, ButtonGroup, TextField } from "@mui/material";
 
-function SmSearch({ placeholder }) {
+function SmSearch({ placeholder, onSearch }) {
+  const handleSearchChange = (event) => {
+    if (onSearch) {
+      onSearch(event.target.value);
+    }
+  };
+
   return (
     <ButtonGroup
       variant="contained"
@@ -26,6 +32,7 @@ function SmSearch({ placeholder }) {
         }}
         placeholder={placeholder}
         dir="rtl"
+        onChange={handleSearchChange}
         className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
       />
       <Button
diff --git a/components/specialties/index.js b/components/specialties/index.js
index 965314b..219855c 100644
--- a/components/specialties/index.js
+++ b/components/specialties/index.js
@@ -4,9 +4,12 @@ import { useEffect, useState } from "react";
 import List from "./list";
 import SmSearch from "../searchHead/SmSearch";
 import HeadPageList from "@/app/component/head";
+import specialtiesData from "@/data/specialties.json";
 
 function SpecialtiesPage() {
   const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredSpecialties, setFilteredSpecialties] = useState(specialtiesData);
 
   useEffect(() => {
     setTimeout(() => {
@@ -14,15 +17,32 @@ function SpecialtiesPage() {
     }, 2000);
   }, []);
 
+  // Filter specialties when search query changes
+  useEffect(() => {
+    if (searchQuery.trim() === "") {
+      setFilteredSpecialties(specialtiesData);
+    } else {
+      const query = searchQuery.toLowerCase().trim();
+      const filtered = specialtiesData.filter((specialty) =>
+        specialty.name.toLowerCase().includes(query)
+      );
+      setFilteredSpecialties(filtered);
+    }
+  }, [searchQuery]);
+
+  const handleSearch = (query) => {
+    setSearchQuery(query);
+  };
+
   return (
     <div className="">
       <HeadPageList
         title="تخصص مورد نظر شما چیست؟"
         detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
       >
-        <SmSearch placeholder="جستجوی تخصص" />
+        <SmSearch placeholder="جستجوی تخصص" onSearch={handleSearch} />
       </HeadPageList>
-      <List loading={loading} />
+      <List loading={loading} specialties={filteredSpecialties} />
     </div>
   );
 }
diff --git a/components/specialties/list/ItemSpecialties.js b/components/specialties/list/ItemSpecialties.js
index 28350a4..27ef9ad 100644
--- a/components/specialties/list/ItemSpecialties.js
+++ b/components/specialties/list/ItemSpecialties.js
@@ -1,9 +1,17 @@
 import TextLoading from "@/app/component/loading/Text";
 import React from "react";
+import { useRouter } from "next/navigation";
 
 function ItemSpecialties({ data, loading }) {
+  const router = useRouter();
+  
+  const handleClick = () => {
+    router.push(`/doctors?specialties=${data.id}`);
+  };
+
   return (
     <li
+      onClick={handleClick}
       className="py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px] 
       rounded-lg bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
       hover:bg-[#5559CE] transition-all duration-500 cursor-pointer hover-mode-item-speciality"
diff --git a/components/specialties/list/index.js b/components/specialties/list/index.js
index 00ce05f..6b02632 100644
--- a/components/specialties/list/index.js
+++ b/components/specialties/list/index.js
@@ -1,9 +1,8 @@
-import specialties from "@/data/specialties.json";
-import ItemSpecialties from "./ItemSpecialties";
 import MenuS from "@/components/icons/MenuS";
 import Pagination from "@/app/component/Pagination";
+import ItemSpecialties from "./ItemSpecialties";
 
-function List({ loading }) {
+function List({ loading, specialties = [] }) {
   return (
     <div className="bg-[#FAFAFA]">
       <div className="flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]">
@@ -12,19 +11,25 @@ function List({ loading }) {
           لیست تخصص ها
         </p>
       </div>
-      <ul
-        className="padding-responsive grid grid-cols-2 sm:grid-cols-3 mg:grid-cols-4 lg:grid-cols-6 
-            gap-x-[16px] md:gap-x-[20px] lg:gap-x-[24px] 
-            gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px]"
-      >
-        {specialties.map((speciality) => (
-          <ItemSpecialties
-            loading={loading}
-            data={speciality}
-            key={speciality.id}
-          />
-        ))}
-      </ul>
+      {specialties.length === 0 ? (
+        <div className="text-center py-10 text-gray-500">
+          تخصصی با این عنوان یافت نشد!
+        </div>
+      ) : (
+        <ul
+          className="padding-responsive grid grid-cols-2 sm:grid-cols-3 mg:grid-cols-4 lg:grid-cols-6 
+              gap-x-[16px] md:gap-x-[20px] lg:gap-x-[24px] 
+              gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px]"
+        >
+          {specialties.map((speciality) => (
+            <ItemSpecialties
+              loading={loading}
+              data={speciality}
+              key={speciality.id}
+            />
+          ))}
+        </ul>
+      )}
       <div className="mt-[48px] flex justify-center">
         <Pagination />
       </div>