ScroolToTop icon 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>
+      )}
+    </>
+  );
+}