{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-navigator",
  "type": "registry:component",
  "title": "Breadcrumb Navigator",
  "description": "A simple breadcrumb navigator component, with query param support.",
  "dependencies": [
    "react-router-dom"
  ],
  "files": [
    {
      "path": "src/registry/new-york/items/breadcrumb-navigator/components/breadcrumb-navigator.tsx",
      "content": "import { useEffect, useState } from \"react\";\nimport { useLocation, useNavigate, useSearchParams } from \"react-router-dom\";\n\ninterface BreadcrumbNavigatorProps {\n    pathOrder: string[];\n    pathToDisplay: { [key: string]: string };\n    pathNormalizer?: (path: string) => string;\n    displayTextClassName?: string;\n}\n\nexport function BreadcrumbNavigator({ pathOrder = [], pathToDisplay = {}, pathNormalizer, displayTextClassName }: BreadcrumbNavigatorProps) {\n    const [searchParams] = useSearchParams();\n\n    const navigate = useNavigate();\n    const location = useLocation();\n\n    const [pathToParam, setPathToParam] = useState<{ [key: string]: any }>(() => {\n        const localParams = localStorage.getItem(\"navigator-params\");\n\n        if (localParams) {\n            return JSON.parse(localParams);\n        }\n\n        const initialParams: { [key: string]: any } = {};\n        pathOrder.forEach(path => {\n            initialParams[path] = null;\n        });\n        return initialParams;\n    });\n\n    useEffect(() => {\n        setPathToParam(prev => {\n            const filteredPath = pathNormalizer ? pathNormalizer(location.pathname) : location.pathname;\n\n            let newParams = {\n                ...prev,\n                [filteredPath]: Object.fromEntries(searchParams) ? Object.fromEntries(searchParams) : \"\",\n            }\n\n            Object.keys(newParams).forEach(path => {\n                if (pathOrder.indexOf(path) > pathOrder.indexOf(filteredPath)) {\n                    newParams[path] = null;\n                }\n            });\n            return newParams;\n        });\n    }, [location.pathname, searchParams]);\n\n    useEffect(() => {\n        localStorage.setItem(\"navigator-params\", JSON.stringify(pathToParam));\n    }, [pathToParam])\n\n    return (\n        <div className=\"text-sm w-screen overflow-x-scroll px-10 my-5\" aria-label=\"Breadcrumb\">\n            <ol className=\"list-none p-0 inline-flex\">\n                {\n                    pathOrder.map((path, index) => (\n                        (pathToParam[path] != null) ? <li key={path} className=\"flex items-center\">\n                            <button\n                                onClick={() => {\n                                    if (path === \"/\") {\n                                        navigate(path);\n                                    } else {\n                                        const queryParams = new URLSearchParams(pathToParam[path] || {}).toString();\n                                        navigate(`${path}${queryParams ? `?${queryParams}` : ''}`);\n                                    }\n                                }}\n                                className={displayTextClassName ? displayTextClassName : \"text-black font-medium\"}\n                            >\n                                {pathToDisplay[path]}\n                            </button>\n\n                            {index < pathOrder.length - 1 && (\n                                <span className=\"mx-2 text-gray-500\">{'>'}</span>\n                            )}\n                        </li> : <></>\n                    ))\n                }\n\n            </ol>\n        </div>\n    );\n}",
      "type": "registry:ui"
    }
  ]
}