add button left/right to slider list

components/clinic/components/about/ListBime.js

@@ -1,23 +1,56 @@
 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, loading }) {
+  const list = useRef();
+
+  const handleScroll = (type) => {
+    console.log(list);
+
+    list.current.scrollBy({
+      left: type === "left" ? -200 : 200,
+      behavior: "smooth",
+    });
+  };
+
   return (
-    <ul 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]">
+    <div className="w-full relative">
-      {data.list_bime.map((item, idx) => (
+      <Button
-        <CustomLoading width={156} height={110} loading={loading}>
+        variant="outlined"
-          <li
+        onClick={() => handleScroll("right")}
-            key={idx}
+        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"
-            className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
+      >
-          >
+        <ArrowLeftList />
-            <Image src={item.img} height={92} width={92} alt="bime" />
+      </Button>
-            <p className="text-[#525252] text-[16px] font-medium">
+      <ul
-              {item.name}
+        ref={list}
-            </p>
+        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]"
-          </li>
+      >
-        </CustomLoading>
+        {data.list_bime.map((item, idx) => (
-      ))}
+          <CustomLoading width={156} height={110} loading={loading}>
-    </ul>
+            <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" />
+              <p className="text-[#525252] text-[16px] font-medium">
+                {item.name}
+              </p>
+            </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>
   );
 }
 

components/icons/ArrowLeftList.js

@@ -0,0 +1,22 @@
+function ArrowLeftList() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="26"
+      height="24"
+      viewBox="0 0 26 24"
+      fill="none"
+    >
+      <path
+        d="M16.1237 19.92L9.33203 13.4C8.52995 12.63 8.52995 11.37 9.33203 10.6L16.1237 4.08002"
+        stroke="#616161"
+        stroke-width="2"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ArrowLeftList;