{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notifications-dropdown",
  "title": "Notifications Dropdown",
  "description": "Navbar dropdown for displaying notifications with icons and text.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-dropdown.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-badge.json"
  ],
  "files": [
    {
      "path": "registry/new-york/notifications-dropdown/components/notifications-dropdown.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ninterface Notification {\n  id: string | number\n  icon: React.ReactNode\n  text: string\n  href?: string\n}\n\ninterface NotificationsDropdownProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  notifications: Notification[]\n  count?: number\n  onViewAll?: () => void\n}\n\nconst NotificationsDropdown = React.forwardRef<\n  HTMLDivElement,\n  NotificationsDropdownProps\n>(({ className, notifications, count, onViewAll, ...props }, ref) => {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n\n  const displayCount = count ?? notifications.length\n\n  React.useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.target as Node)\n      ) {\n        setIsOpen(false)\n      }\n    }\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside)\n    }\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside)\n  }, [isOpen])\n\n  return (\n    <div\n      ref={(node) => {\n        ;(\n          containerRef as React.MutableRefObject<HTMLDivElement | null>\n        ).current = node\n        if (typeof ref === \"function\") ref(node)\n        else if (ref) ref.current = node\n      }}\n      className={cn(\"relative inline-block\", className)}\n      {...props}\n    >\n      <button\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"relative flex items-center justify-center w-[50px] h-[50px] bg-transparent border-none text-[var(--adminlte-skin-navbar-color)] cursor-pointer hover:bg-black/10\"\n        aria-label=\"Notifications\"\n      >\n        {/* Bell icon */}\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 448 512\"\n          fill=\"currentColor\"\n          className=\"w-[16px] h-[16px]\"\n        >\n          <path d=\"M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z\" />\n        </svg>\n        {displayCount > 0 && (\n          <span className=\"absolute top-[8px] right-[6px] inline-block min-w-[10px] px-[5px] py-[2px] text-[10px] font-bold leading-none text-center text-white bg-[#f39c12] rounded-[10px]\">\n            {displayCount}\n          </span>\n        )}\n      </button>\n\n      {isOpen && (\n        <ul className=\"absolute right-0 z-[1000] min-w-[280px] py-0 mt-0 bg-white border border-[#ccc] rounded-[3px] shadow-[0_6px_12px_rgba(0,0,0,0.175)] list-none\">\n          <li className=\"px-[10px] py-[10px] text-[14px] font-bold text-center border-b border-[#f4f4f4]\">\n            You have {displayCount} notifications\n          </li>\n          {notifications.map((notification) => (\n            <li key={notification.id} className=\"border-b border-[#f4f4f4]\">\n              <a\n                href={notification.href || \"#\"}\n                className=\"flex items-center px-[10px] py-[10px] no-underline text-[#333] hover:bg-[#f4f4f4]\"\n              >\n                <span className=\"mr-[10px] flex-shrink-0\">\n                  {notification.icon}\n                </span>\n                <span className=\"text-[13px]\">{notification.text}</span>\n              </a>\n            </li>\n          ))}\n          <li className=\"px-[10px] py-[10px] bg-[#f4f4f4] text-center\">\n            <a\n              href=\"#\"\n              onClick={(e) => {\n                e.preventDefault()\n                onViewAll?.()\n              }}\n              className=\"text-[14px] text-[#3c8dbc] no-underline hover:underline\"\n            >\n              View all\n            </a>\n          </li>\n        </ul>\n      )}\n    </div>\n  )\n})\nNotificationsDropdown.displayName = \"NotificationsDropdown\"\n\nexport { NotificationsDropdown }\nexport type { NotificationsDropdownProps, Notification }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}