NotificationsButton.tsx raw

   1  import { usePrimaryPage } from '@/PageManager'
   2  import { useNostr } from '@/providers/NostrProvider'
   3  import { useNotification } from '@/providers/NotificationProvider'
   4  import { Bell } from 'lucide-react'
   5  import BottomNavigationBarItem from './BottomNavigationBarItem'
   6  
   7  export default function NotificationsButton() {
   8    const { checkLogin } = useNostr()
   9    const { navigate, current, display } = usePrimaryPage()
  10    const { hasNewNotification } = useNotification()
  11  
  12    return (
  13      <BottomNavigationBarItem
  14        active={current === 'notifications' && display}
  15        onClick={() => checkLogin(() => navigate('notifications'))}
  16      >
  17        <div className="relative">
  18          <Bell />
  19          {hasNewNotification && (
  20            <div className="absolute -top-0.5 right-0.5 w-2 h-2 ring-2 ring-background bg-primary rounded-full" />
  21          )}
  22        </div>
  23      </BottomNavigationBarItem>
  24    )
  25  }
  26