50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
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);
|
|
|
|
return (
|
|
<div className="bg-[#FAFAFA]">
|
|
<div className="flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]">
|
|
<MenuS />
|
|
<h1 className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] font-bold">
|
|
لیست تخصص ها
|
|
</h1>
|
|
</div>
|
|
{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]"
|
|
>
|
|
{currentList.map((speciality) => (
|
|
<ItemSpecialties data={speciality} key={speciality.id} />
|
|
))}
|
|
</ul>
|
|
)}
|
|
<div className="mt-[48px] flex justify-center">
|
|
<Pagination
|
|
page={page}
|
|
setPage={setPage}
|
|
list={specialties}
|
|
itemsPerPage={itemsPerPage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default List;
|