InboxButton.tsx raw

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