handle pagination in specialities and fix warning

app/component/Pagination.js

@@ -1,10 +1,13 @@
 import { Pagination as PaginationMUI } from "@mui/material";
 
-function Pagination() {
+function Pagination({ page, setPage, list, itemsPerPage }) {
+  const handleChange = (_, value) => setPage(value);
+
   return (
     <PaginationMUI
-      // count={doctors.length / 12} org
-      count={20}
+      count={list && itemsPerPage ? Math.ceil(list.length / itemsPerPage) : 20}
+      page={page || 1}
+      onChange={setPage && handleChange}
       color="primary"
       sx={{
         "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
@@ -13,9 +16,9 @@ function Pagination() {
           fontWeight: "500",
         },
         "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
-          {
-            color: "#F8F8FF",
-          },
+        {
+          color: "#F8F8FF",
+        },
         "& .MuiSvgIcon-root": {
           rotate: "180deg !important",
         },

app/globals.css

@@ -842,4 +842,8 @@ html {
   top: 16px;
 }
 
-/* End Of Toastify */
+/* End Of Toastify */
+
+.text-item-head-white:hover .item-head {
+  color: #D7D8ED;
+}

components/specialties/index.js

@@ -7,17 +7,9 @@ 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(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
-  // Filter specialties when search query changes
   useEffect(() => {
     if (searchQuery.trim() === "") {
       setFilteredSpecialties(specialtiesData);
@@ -42,7 +34,7 @@ function SpecialtiesPage() {
       >
         <SmSearch placeholder="جستجوی تخصص" onSearch={handleSearch} />
       </HeadPageList>
-      <List loading={loading} specialties={filteredSpecialties} />
+      <List specialties={filteredSpecialties} />
     </div>
   );
 }

components/specialties/list/ItemSpecialties.js

@@ -1,7 +1,6 @@
-import TextLoading from "@/app/component/loading/Text";
 import Link from "next/link";
 
-function ItemSpecialties({ data, loading }) {
+function ItemSpecialties({ data }) {
   return (
     <li>
       <Link
@@ -13,16 +12,12 @@ function ItemSpecialties({ data, loading }) {
         }}
         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"
+      hover:bg-[#5559CE] transition-all text-item-head-white duration-500 cursor-pointer hover-mode-item-speciality"
       >
-        <TextLoading loading={loading} width={70} height={18}>
-          <h2 className="text-[#3B3B3B] text-[16px] font-bold">{data.name}</h2>
-        </TextLoading>
-        <TextLoading loading={loading} width={50} height={18}>
-          <p className="text-[#7E7E7E] text-[14px] font-medium">
-            {data.number_of_doctors} پزشک
-          </p>
-        </TextLoading>
+        <h2 className="text-[#3B3B3B] item-head text-[16px] font-bold text-center">{data.name}</h2>
+        <p className="text-[#7E7E7E] text-[14px] font-medium">
+          {data.number_of_doctors} پزشک
+        </p>
       </Link>
     </li>
   );

components/specialties/list/index.js

@@ -1,8 +1,16 @@
 import MenuS from "@/components/icons/MenuS";
 import Pagination from "@/app/component/Pagination";
 import ItemSpecialties from "./ItemSpecialties";
+import { useState } from "react";
+
+function List({ specialties = [] }) {
+  const [page, setPage] = useState(1);
+  const itemsPerPage = 24;
+
+  const startIndex = (page - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentList = specialties.filter((_, i) => i >= startIndex && i < endIndex);
 
-function List({ loading, specialties = [] }) {
   return (
     <div className="bg-[#FAFAFA]">
       <div className="flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]">
@@ -21,17 +29,18 @@ function List({ loading, specialties = [] }) {
               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}
-            />
+          {currentList.map((speciality) => (
+            <ItemSpecialties data={speciality} key={speciality.id} />
           ))}
         </ul>
       )}
       <div className="mt-[48px] flex justify-center">
-        <Pagination />
+        <Pagination
+          page={page}
+          setPage={setPage}
+          list={specialties}
+          itemsPerPage={itemsPerPage}
+        />
       </div>
     </div>
   );