Notifications Dropdown

import NotificationsDropdown from '@/components/blocks/notifications-dropdown.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <NotificationsDropdown />
    </div>
  )
}

'use client'

import { Bell } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'

// Replace with your real notification data source
const notifications = [
  {
    id: '1',
    title: 'New asset uploaded',
    description: 'logo-dark.svg was added to Brand Assets',
    time: '2 min ago',
    unread: true,
  },
  {
    id: '2',
    title: 'Export ready',
    description: 'Your brand guidelines PDF is ready to download.',
    time: '1 hr ago',
    unread: true,
  },
  {
    id: '3',
    title: 'Theme updated',
    description: 'Primary colour changed to #6862e4.',
    time: 'Yesterday',
    unread: false,
  },
]

export function NotificationsDropdown() {
  const unreadCount = notifications.filter((n) => n.unread).length

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="relative" aria-label="Notifications">
          <Bell className="h-4 w-4" />
          {unreadCount > 0 && (
            <Badge className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full p-0 text-[10px]">
              {unreadCount}