72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
// import Swiper core and required modules
|
|
import { Navigation, A11y } from "swiper/modules";
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
// Import Swiper styles
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/pagination";
|
|
import "swiper/css/scrollbar";
|
|
import { useGetCategories } from "../../api/Categories";
|
|
import { Category } from "../../types/item";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { addBaseUrlToSrc } from "../../utils/addBaseUrlToSrc";
|
|
import { languageObject } from "../../utils/languageObject";
|
|
import Loading from "../Utils/Loading/Loading";
|
|
|
|
const CategoriesSlider = () => {
|
|
const { data , isLoading} = useGetCategories();
|
|
const categories = (data?.categories as Category[]) || ([] as []);
|
|
const navigate = useNavigate();
|
|
const handelNavigate = (data: Category) => {
|
|
navigate(`/categories?category=${data?.id}`);
|
|
};
|
|
console.log(categories);
|
|
|
|
|
|
return (
|
|
<div className="CategoriesSlider">
|
|
<Swiper
|
|
modules={[Navigation, A11y]}
|
|
spaceBetween={10}
|
|
// slidesPerView={5}
|
|
navigation
|
|
breakpoints={{
|
|
320: {
|
|
slidesPerView: 2,
|
|
},
|
|
480: {
|
|
slidesPerView: 3,
|
|
},
|
|
640: {
|
|
slidesPerView: 3,
|
|
},
|
|
768: {
|
|
slidesPerView: 4,
|
|
},
|
|
1024: {
|
|
slidesPerView: 5,
|
|
},
|
|
}}
|
|
>
|
|
{isLoading ?<Loading/> :categories?.map((item: Category, index: number) => {
|
|
return (
|
|
<SwiperSlide key={index}>
|
|
<div className="CategoriesSlider_image">
|
|
<img
|
|
onClick={() => handelNavigate(item)}
|
|
src={addBaseUrlToSrc(item?.photo)}
|
|
alt={`category ${index + 1}`}
|
|
/>
|
|
<p className="truncate-text">{languageObject(item?.name)}</p>
|
|
</div>
|
|
</SwiperSlide>
|
|
);
|
|
})}
|
|
</Swiper>
|
|
</div>
|
|
);
|
|
};
|
|
export default CategoriesSlider;
|