arrow added | 60

src/views/Products/layouts/Desktop/Main.js

@@ -210,10 +210,10 @@ export const Main = ({
           ))}
         </ul>
       </div>
+
       <div className="flex flex-col w-full relative">
         {/* arrow */}
-        <div className="w-fit self-end flex flex-row items-center justify-between gap-x-2 px-2 py-1 bg-gray-50 border border-solid border-gray-200 rounded-md50">
-          {/* right arrow */}
+        {/* <div className="w-fit self-end flex flex-row items-center justify-between gap-x-2 px-2 py-1 bg-gray-50 border border-solid border-gray-200 rounded-md50">
           <div className="cursor-pointer">
             <img
               src={dropdownIcon}
@@ -221,9 +221,7 @@ export const Main = ({
               className="w-5 transform -rotate-90 cursor-pointer"
             />
           </div>
-          {/* divider */}
           <div className="w-0.5 h-6 bg-gray-200"></div>
-          {/* left arrow */}
           <div className="cursor-pointer">
             <img
               src={dropdownIcon}
@@ -231,7 +229,7 @@ export const Main = ({
               className="w-5 transform rotate-90 cursor-pointer"
             />
           </div>
-        </div>
+        </div> */}
         {/* carousel slider */}
         {filterLoading && (
           <div
@@ -241,20 +239,45 @@ export const Main = ({
             <Loading size={4} color="bg-green-400" />
           </div>
         )}
-        <div>
-          {(filterOptions?.productType
-            ? filterOptions.productType === "دوره ویدئویی"
-            : true) && (
-            <ScrollingCarousel
-              rightArrow={<div>{">"}</div>}
-              leftArrow={<div>{"<"}</div>}
-              className="max-w-full"
+        {books.length > 0 && (
+          <div className="relative w-full" style={{ direction: "ltr" }}>
+            <Carousel
+              show={Math.round(window.innerWidth / 666)}
+              slide={2}
+              swiping={true}
               useArrowKeys={true}
+              transition={0.5}
+              rightArrow={
+                <img
+                  className="bg-gray-50 p-2 absolute top-0 transform -rotate-90 translate-y-0 translate-x-0 left-6 cursor-pointer"
+                  src={dropdownIcon}
+                  style={{
+                    borderRight: "solid 2px #E5E7EB",
+                    borderLeft: "solid 2px #E5E7EB",
+                    borderBottom: "solid 2px #E5E7EB",
+                    borderRadius: "4px",
+                  }}
+                  alt=""
+                />
+              }
+              leftArrow={
+                <img
+                  className="bg-gray-50 p-2 absolute top-0 transform rotate-90 translate-y-0 translate-x-0 left-0 cursor-pointer"
+                  src={dropdownIcon}
+                  style={{
+                    borderRight: "solid 2px #E5E7EB",
+                    borderLeft: "solid 2px #E5E7EB",
+                    borderBottom: "solid 2px #E5E7EB",
+                    borderRadius: "4px",
+                  }}
+                  alt=""
+                />
+              }
             >
               {Items(2)}
-            </ScrollingCarousel>
-          )}
+            </Carousel>
           </div>
+        )}
         <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3">
           {Items(1)}
         </div>