handle pagination in specialities and fix warning

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>
   );