ScroolToTop icon button

components/carTypePageParts/productCard.tsx

@@ -12,6 +12,7 @@ export default function ProductCard({data}:{data: ProductTypes}) {
           src={data.image}
           alt={data.truck_name}
           width={200}
+          height={200}
           className="object-contain h-auto"
         />
       </div>

components/pageParts/products.tsx

@@ -36,14 +36,14 @@ export default function Products() {
       </div>
 
       {/* product filters */}
-      <div className="flex flex-wrap gap-3 items-center justify-center">
+      <div className="flex flex-wrap gap-1 items-center justify-center mb-10 ">
         {productFilterTypes.map((item, index) => (
           <button
             key={index}
             onClick={() => setProductFilter(item.name)}
             className={`${
               productFilter === item.name ? "bg-secondary" : ""
-            } flex items-center gap-2 hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-8 py-3 text-2xl rounded-tr-full rounded-bl-full `}
+            } flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
           >
             <Text txt={item.name} />
             <Image
@@ -51,6 +51,7 @@ export default function Products() {
               alt="Truck images"
               width={50}
               height={50}
+              className="object-cover"
             />
           </button>
         ))}

components/upScroll.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { FaArrowUp } from "react-icons/fa";
+import { useEffect, useState, useCallback } from "react";
+
+export default function UpScrollIcon() {
+  const [showButton, setShowButton] = useState(false);
+
+  // Scroll hodisasini boshqaruvchi funksiya
+  const handleScroll = useCallback(() => {
+    if (window.scrollY > 200) {
+      // 200px dan pastga tushganda tugma ko'rinadi
+      setShowButton(true);
+    } else {
+      setShowButton(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+
+    // Tozalash (cleanup)
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [handleScroll]);
+
+  // Scrollni yuqoriga olib chiqish funksiyasi
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth", // silliq ko'tarilish
+    });
+  };
+
+  return (
+    <>
+      {showButton && (
+        <span
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 bg-secondary hover:bg-primary text-white p-3 rounded-full cursor-pointer shadow-lg transition"
+        >
+          <FaArrowUp size={20} />
+        </span>
+      )}
+    </>
+  );
+}