update src/components/ProductTab/index.js, src/components/VodProduct/index.js, Main.js and Sidebar.js

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

@@ -9,6 +9,8 @@ import Loading from "../../../../components/Loading";
 import { book, publicApi } from "../../../../redux/actions";
 import moment from "jalali-moment";
 
+import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
+
 export const Main = ({
   books,
   grades,
@@ -216,13 +218,34 @@ export const Main = ({
             <Loading size={4} color="bg-green-400" />
           </div>
         )}
-        {(filterOptions?.productType
-          ? filterOptions.productType === "دوره ویدئویی"
-          : true) && (
-          <ScrollingCarousel className="py-3 max-w-full">
-            {Items(2)}
-          </ScrollingCarousel>
-        )}
+        <div>
+          {/* arrow */}
+
+          <div className="flex flex-row items-center justify-between  px-2 py-1 bg-gray-50 border border-solid border-gray-200 rounded-md50 divide-x-2 divide-red-700 divide-x-reverse">
+            <div className="">
+              <img
+                src={dropdownIcon}
+                alt=""
+                className={`w-4 transform transition-all -rotate-90  cursor-pointer`}
+              />
+            </div>
+            <div className="">
+              <img
+                src={dropdownIcon}
+                alt=""
+                className={`w-4 transform transition-all rotate-90 cursor-pointer`}
+              />
+            </div>
+          </div>
+
+          {(filterOptions?.productType
+            ? filterOptions.productType === "دوره ویدئویی"
+            : true) && (
+            <ScrollingCarousel className="max-w-full">
+              {Items(2)}
+            </ScrollingCarousel>
+          )}
+        </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)}