{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tasks-dropdown",
  "title": "Tasks Dropdown",
  "description": "Navbar dropdown for displaying task progress with progress bars.",
  "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-progress.json"
  ],
  "files": [
    {
      "path": "registry/new-york/tasks-dropdown/components/tasks-dropdown.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ntype TaskColor =\n  | \"aqua\"\n  | \"red\"\n  | \"green\"\n  | \"yellow\"\n  | \"blue\"\n  | \"purple\"\n  | \"light-blue\"\n  | \"primary\"\n  | \"success\"\n  | \"info\"\n  | \"warning\"\n  | \"danger\"\n\nconst taskColorStyles: Record<TaskColor, string> = {\n  aqua: \"bg-[#00c0ef]\",\n  red: \"bg-[#dd4b39]\",\n  green: \"bg-[#00a65a]\",\n  yellow: \"bg-[#f39c12]\",\n  blue: \"bg-[#3c8dbc]\",\n  purple: \"bg-[#605ca8]\",\n  \"light-blue\": \"bg-[#3c8dbc]\",\n  primary: \"bg-[#3c8dbc]\",\n  success: \"bg-[#00a65a]\",\n  info: \"bg-[#00c0ef]\",\n  warning: \"bg-[#f39c12]\",\n  danger: \"bg-[#dd4b39]\",\n}\n\ninterface Task {\n  id: string | number\n  name: string\n  progress: number\n  color: TaskColor\n}\n\ninterface TasksDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n  tasks: Task[]\n  count?: number\n  onViewAll?: () => void\n}\n\nconst TasksDropdown = React.forwardRef<HTMLDivElement, TasksDropdownProps>(\n  ({ className, tasks, count, onViewAll, ...props }, ref) => {\n    const [isOpen, setIsOpen] = React.useState(false)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n\n    const displayCount = count ?? tasks.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 () =>\n        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=\"Tasks\"\n        >\n          {/* Flag 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=\"M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z\" />\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-[#dd4b39] 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} tasks\n            </li>\n            {tasks.map((task) => {\n              const clampedProgress = Math.max(0, Math.min(100, task.progress))\n              return (\n                <li\n                  key={task.id}\n                  className=\"px-[10px] py-[10px] border-b border-[#f4f4f4]\"\n                >\n                  <div className=\"flex justify-between mb-[5px]\">\n                    <span className=\"text-[13px] text-[#333] truncate\">\n                      {task.name}\n                    </span>\n                    <span className=\"text-[12px] text-[#999]\">\n                      {clampedProgress}%\n                    </span>\n                  </div>\n                  <div className=\"w-full h-[7px] bg-[#f4f4f4] rounded-[3px] overflow-hidden\">\n                    <div\n                      className={cn(\n                        \"h-full transition-[width] duration-500\",\n                        taskColorStyles[task.color]\n                      )}\n                      style={{ width: `${clampedProgress}%` }}\n                      role=\"progressbar\"\n                      aria-valuenow={clampedProgress}\n                      aria-valuemin={0}\n                      aria-valuemax={100}\n                    />\n                  </div>\n                </li>\n              )\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 tasks\n              </a>\n            </li>\n          </ul>\n        )}\n      </div>\n    )\n  }\n)\nTasksDropdown.displayName = \"TasksDropdown\"\n\nexport { TasksDropdown }\nexport type { TasksDropdownProps, Task, TaskColor }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}