You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.2 KiB
46 lines
1.2 KiB
import { Button } from '@/components/ui/button' |
|
import { cn } from '@/lib/utils' |
|
import { useScreenSize } from '@/providers/ScreenSizeProvider' |
|
import { ChevronUp } from 'lucide-react' |
|
|
|
export default function ScrollToTopButton({ |
|
scrollAreaRef, |
|
className, |
|
visible = true |
|
}: { |
|
scrollAreaRef: React.RefObject<HTMLDivElement> |
|
className?: string |
|
visible?: boolean |
|
}) { |
|
const { isSmallScreen } = useScreenSize() |
|
|
|
const handleScrollToTop = () => { |
|
if (isSmallScreen) { |
|
window.scrollTo({ top: 0, behavior: 'smooth' }) |
|
return |
|
} |
|
scrollAreaRef.current?.scrollTo({ top: 0, behavior: 'smooth' }) |
|
} |
|
|
|
return ( |
|
<div |
|
className={cn( |
|
`fixed sm:sticky z-20 flex justify-end w-full pr-3 transition-opacity duration-700 ${visible ? '' : 'opacity-0'}`, |
|
className |
|
)} |
|
style={{ |
|
bottom: isSmallScreen |
|
? 'calc(env(safe-area-inset-bottom) + 3.75rem)' |
|
: 'calc(env(safe-area-inset-bottom) + 0.75rem)' |
|
}} |
|
> |
|
<Button |
|
variant="secondary-2" |
|
className="rounded-full w-12 h-12 p-0 hover:text-background" |
|
onClick={handleScrollToTop} |
|
> |
|
<ChevronUp /> |
|
</Button> |
|
</div> |
|
) |
|
}
|
|
|