scroll-to-top.tsx

"use client"

import { cn } from "@/lib/utils"
import { useEffect, useState } from "react"
import { Icons } from "./icons"
import { Button } from "./ui/button"

export default function ScrollToTop() {
    const [isVisible, setIsVisible] = useState(false)

    const toggleVisibility = () => {
        if (window.scrollY > 300) {
            setIsVisible(true)
        } else {
            setIsVisible(false)
        }
    }

    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        })
    }

    useEffect(() => {
        window.addEventListener("scroll", toggleVisibility)
        return () => window.removeEventListener("scroll", toggleVisibility)
    }, [])

    return (
        <div className="fixed z-50 m-3 flex justify-center">
            <Button size="lg" onClick={scrollToTop}
                className={cn(isVisible ? "block" : "hidden", "")}>
                <Icons.arrowupline className="h-3 w-3" aria-hidden="true" />
            </Button>
        </div>
    )
}