'use client'; import { useQuery } from '@tanstack/react-query'; import { ChevronDown, ChevronUp, Loader2Icon } from 'lucide-react'; import { notFound, useParams } from 'next/navigation'; import { parseDocsPathParams } from '@/util/parseDocsPathParams'; import { resolveNodeKind } from './DocKind'; import { NavigationItem } from './NavigationItem'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/Collapsible'; export function Navigation() { const params = useParams<{ item?: string[] | undefined; packageName: string; version: string; }>(); const { entryPoints: parsedEntrypoints } = parseDocsPathParams(params.item); const { data: node, status, isLoading, } = useQuery({ queryKey: ['sitemap', params.packageName, params.version, parsedEntrypoints.join('.')], queryFn: async () => { const response = await fetch( `/api/docs/sitemap?packageName=${params.packageName}&version=${params.version}&entryPoint=${parsedEntrypoints.join('.')}`, ); return response.json(); }, }); if ((status === 'success' && !node) || status === 'error') { notFound(); } const groupedNodes = node?.reduce((acc: any, node: any) => { (acc[node.kind.toLowerCase()] ||= []).push(node); return acc; }, {}); if (isLoading) { return ; } return ( ); }