CoolFace
Apppublic

FLASHback1/bingo

sourceHugging Facemitupdated 3y agoView on Hugging Face
0likes
button-scroll-to-bottom.tsx35 linesDownload Raw Back to components
1'use client'2 3import * as React from 'react'4 5import { cn } from '@/lib/utils'6import { useAtBottom } from '@/lib/hooks/use-at-bottom'7import { Button, type ButtonProps } from '@/components/ui/button'8import { IconArrowDown } from '@/components/ui/icons'9 10export function ButtonScrollToBottom({ className, ...props }: ButtonProps) {11  const isAtBottom = useAtBottom()12 13  return (14    <Button15      variant="outline"16      size="icon"17      className={cn(18        'fixed right-4 bottom-24 z-50 bg-background transition-opacity duration-300 sm:right-20',19        isAtBottom ? 'opacity-0' : 'opacity-100',20        className21      )}22      onClick={() =>23        window.scrollTo({24          top: document.body.offsetHeight,25          behavior: 'smooth'26        })27      }28      {...props}29    >30      <IconArrowDown />31      <span className="sr-only">Scroll to bottom</span>32    </Button>33  )34}35