Notification Panel

Painel dropdown com lista de notificações lidas e não-lidas.

Default

Clique no sino para abrir

<NotificationPanel />

// Estrutura interna:
<div className="relative">
  <button> // Ícone sino + badge com contagem
  {open && (
    <div className="absolute right-0 ... w-80 rounded-lg border bg-popover shadow-md">
      <header>Notificações / Marcar todas como lidas</header>
      <div className="max-h-80 overflow-y-auto">
        {notifications.map(n => (
          <button> // Ícone + título + descrição + tempo + dot não-lida
        ))}
      </div>
      <footer>Ver todas as notificações</footer>
    </div>
  )}
</div>