Scroll Button

1"use client"
2 
3import { Button, buttonVariants } from "@/components/ui/button"
4import { cn } from "@/lib/utils"
5import { type VariantProps } from "class-variance-authority"
6import { ChevronDown } from "lucide-react"
7import { useStickToBottomContext } from "use-stick-to-bottom"
8 
9export type ScrollButtonProps = {
10  className?: string
11  variant?: VariantProps<typeof buttonVariants>["variant"]
12  size?: VariantProps<typeof buttonVariants>["size"]
13} & React.ButtonHTMLAttributes<HTMLButtonElement>
14 
15function ScrollButton({
16  className,
17  variant = "outline",
18  size = "sm",
19  ...props
20}: ScrollButtonProps) {
21  const { isAtBottom, scrollToBottom } = useStickToBottomContext()
22 
23  return (
24    <Button
25      variant={variant}
26      size={size}
27      className={cn(
28        "h-10 w-10 rounded-full transition-all duration-150 ease-out",
29        !isAtBottom
30          ? "translate-y-0 scale-100 opacity-100"
31          : "pointer-events-none translate-y-4 scale-95 opacity-0",
32        className
33      )}
34      onClick={() => scrollToBottom()}
35      {...props}
36    >
37      <ChevronDown className="h-5 w-5" />
38    </Button>
39  )
40}
41 
42export { ScrollButton }