56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
import CustomLoading from "@/app/component/loading/Custom";
|
|
import ArrowLeftList from "@/components/icons/ArrowLeftList";
|
|
import { Button } from "@mui/material";
|
|
import Image from "next/image";
|
|
import { useRef } from "react";
|
|
|
|
function ListBime({ data }) {
|
|
const list = useRef();
|
|
|
|
const handleScroll = (type) => {
|
|
list.current.scrollBy({
|
|
left: type === "left" ? -200 : 200,
|
|
behavior: "smooth",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="w-full relative">
|
|
<Button
|
|
variant="outlined"
|
|
onClick={() => handleScroll("right")}
|
|
className="!border-[#EFEFEF] !hidden md:!flex !bg-[#FFF] !absolute !right-[-24px] !top-1/2 !-translate-y-1/2 !rounded-full !min-w-fit !p-0 !w-[48px] !h-[48px] !z-20 !rotate-180"
|
|
>
|
|
<ArrowLeftList />
|
|
</Button>
|
|
<ul
|
|
ref={list}
|
|
className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]"
|
|
>
|
|
{data?.list_bime?.map((item, idx) => (
|
|
<CustomLoading width={156} height={110}>
|
|
<li
|
|
key={idx}
|
|
className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
|
|
>
|
|
<Image src={item.img} height={92} width={92} alt="bime" />
|
|
<h3 className="text-[#525252] text-[16px] font-medium">
|
|
{item.name}
|
|
</h3>
|
|
</li>
|
|
</CustomLoading>
|
|
))}
|
|
<Button
|
|
variant="outlined"
|
|
onClick={() => handleScroll("left")}
|
|
className="!border-[#EFEFEF] !hidden md:!flex !bg-[#FFF] !absolute !left-[-24px] !top-1/2 !-translate-y-1/2 !rounded-full !min-w-fit !p-0 !w-[48px] !h-[48px] !z-20"
|
|
>
|
|
<ArrowLeftList />
|
|
</Button>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ListBime;
|