NotificationButton.tsx raw

   1  import { usePrimaryPage } from '@/PageManager'
   2  import { useKeyboardNavigation } from '@/providers/KeyboardNavigationProvider'
   3  import { useNostr } from '@/providers/NostrProvider'
   4  import { useNotification } from '@/providers/NotificationProvider'
   5  import { Bell } from 'lucide-react'
   6  import SidebarItem from './SidebarItem'
   7  
   8  export default function NotificationsButton({ collapse, navIndex }: { collapse: boolean; navIndex?: number }) {
   9    const { checkLogin } = useNostr()
  10    const { navigate, current, display } = usePrimaryPage()
  11    const { hasNewNotification } = useNotification()
  12    const { clearColumn } = useKeyboardNavigation()
  13  
  14    const handleClick = () => {
  15      checkLogin(() => {
  16        navigate('notifications')
  17        clearColumn(1)
  18      })
  19    }
  20  
  21    return (
  22      <SidebarItem
  23        title="Notifications"
  24        onClick={handleClick}
  25        active={display && current === 'notifications'}
  26        collapse={collapse}
  27        navIndex={navIndex}
  28      >
  29        <div className="relative">
  30          <Bell />
  31          {hasNewNotification && (
  32            <div className="absolute -top-1 right-0 w-2 h-2 ring-2 ring-background bg-primary rounded-full" />
  33          )}
  34        </div>
  35      </SidebarItem>
  36    )
  37  }
  38