82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
"use client";
|
|
import { MdChevronRight } from "react-icons/md";
|
|
import { Button } from "@/components/ui/button";
|
|
import { t } from "@/utils";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
|
|
const ComponentOne = ({
|
|
categories,
|
|
categoriesLoading,
|
|
fetchMoreCategory,
|
|
lastPage,
|
|
currentPage,
|
|
isLoadMoreCat,
|
|
handleCategoryTabClick,
|
|
}) => {
|
|
return (
|
|
<>
|
|
<div className=" grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{categoriesLoading ? (
|
|
<div className="col-span-12 py-28">
|
|
<Loader />
|
|
</div>
|
|
) : (
|
|
categories?.map((category) => {
|
|
return (
|
|
<div className="" key={category?.id}>
|
|
<div
|
|
className="flex justify-between items-center cursor-pointer"
|
|
key={category?.id}
|
|
onClick={() => handleCategoryTabClick(category)}
|
|
>
|
|
<div className="flex items-center gap-2 ">
|
|
<CustomImage
|
|
src={category?.image}
|
|
alt={category?.translated_name || category?.name}
|
|
height={48}
|
|
width={48}
|
|
className="h-12 w-12 rounded-full"
|
|
/>
|
|
<span className="break-all">
|
|
{category?.translated_name || category?.name}
|
|
</span>
|
|
</div>
|
|
{category?.subcategories?.length > 0 && (
|
|
<MdChevronRight size={24} className="rtl:scale-x-[-1]" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{lastPage > currentPage && (
|
|
<div className="text-center mt-6">
|
|
<Button
|
|
variant="outline"
|
|
className="text-sm sm:text-base text-primary w-[256px]"
|
|
disabled={isLoadMoreCat || categoriesLoading}
|
|
onClick={fetchMoreCategory}
|
|
>
|
|
{isLoadMoreCat ? t("loading") : t("loadMore")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ComponentOne;
|
|
|
|
const Loader = () => {
|
|
return (
|
|
<div className="flex justify-center">
|
|
<div className="relative w-12 h-12">
|
|
<div className="absolute w-12 h-12 bg-primary rounded-full animate-ping"></div>
|
|
<div className="absolute w-12 h-12 bg-primary rounded-full animate-ping delay-1000"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|