{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "messages-dropdown",
  "title": "Messages Dropdown",
  "description": "Navbar dropdown for displaying recent messages with avatar, name, text preview, and timestamp.",
  "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/messages-dropdown/components/messages-dropdown.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ninterface Message {\n  id: string | number\n  name: string\n  avatarUrl: string\n  text: string\n  time: string\n  href?: string\n}\n\ninterface MessagesDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n  messages: Message[]\n  count?: number\n  onSeeAll?: () => void\n}\n\nconst MessagesDropdown = React.forwardRef<HTMLDivElement, MessagesDropdownProps>(\n  ({ className, messages, count, onSeeAll, ...props }, ref) => {\n    const [isOpen, setIsOpen] = React.useState(false)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n\n    const displayCount = count ?? messages.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          ;(containerRef as React.MutableRefObject<HTMLDivElement | null>).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=\"Messages\"\n        >\n          {/* Mail icon */}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 512 512\"\n            fill=\"currentColor\"\n            className=\"w-[16px] h-[16px]\"\n          >\n            <path d=\"M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z\" />\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-[#00a65a] 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} messages\n            </li>\n            {messages.map((message) => (\n              <li key={message.id} className=\"border-b border-[#f4f4f4]\">\n                <a\n                  href={message.href || \"#\"}\n                  className=\"flex items-start px-[10px] py-[10px] no-underline text-[#333] hover:bg-[#f4f4f4]\"\n                >\n                  <div className=\"flex-shrink-0 mr-[10px]\">\n                    <img\n                      src={message.avatarUrl}\n                      alt={message.name}\n                      className=\"w-[40px] h-[40px] rounded-full object-cover\"\n                    />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-[14px] font-semibold m-0 mb-[2px] text-[#333] truncate\">\n                      {message.name}\n                    </h4>\n                    <p className=\"text-[12px] text-[#999] m-0 mb-[2px] truncate\">\n                      {message.text}\n                    </p>\n                    <p className=\"text-[12px] text-[#999] m-0\">\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 512 512\"\n                        fill=\"currentColor\"\n                        className=\"w-[10px] h-[10px] mr-[4px] inline-block\"\n                      >\n                        <path d=\"M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z\" />\n                      </svg>\n                      {message.time}\n                    </p>\n                  </div>\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                  onSeeAll?.()\n                }}\n                className=\"text-[14px] text-[#3c8dbc] no-underline hover:underline\"\n              >\n                See All Messages\n              </a>\n            </li>\n          </ul>\n        )}\n      </div>\n    )\n  }\n)\nMessagesDropdown.displayName = \"MessagesDropdown\"\n\nexport { MessagesDropdown }\nexport type { MessagesDropdownProps, Message }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}