NewNotesAboveIndicator.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { ArrowUp } from 'lucide-react'
   3  import { useTranslation } from 'react-i18next'
   4  
   5  export default function NewNotesAboveIndicator({
   6    count,
   7    onClick
   8  }: {
   9    count: number
  10    onClick: () => void
  11  }) {
  12    const { t } = useTranslation()
  13  
  14    if (count <= 0) return null
  15  
  16    return (
  17      <div className="sticky top-[calc(6rem+1px)] z-40 flex justify-center pointer-events-none">
  18        <Button
  19          onClick={onClick}
  20          variant="secondary"
  21          className="rounded-full h-8 px-3 gap-1.5 shadow-md pointer-events-auto"
  22          size="sm"
  23        >
  24          <ArrowUp className="size-3.5" />
  25          <span className="text-sm">
  26            {t('n new notes above', { n: count > 99 ? '99+' : count })}
  27          </span>
  28        </Button>
  29      </div>
  30    )
  31  }
  32