81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import { api } from '@/app/_trpc/client';
|
|
import { useOrganizationParams } from '@/hooks/useOrganizationParams';
|
|
import { ChevronRight, HomeIcon } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
import { Container } from '../Container';
|
|
|
|
export function Breadcrumbs() {
|
|
const params = useOrganizationParams();
|
|
|
|
const org = api.organization.get.useQuery(
|
|
{
|
|
id: params.organizationId,
|
|
},
|
|
{
|
|
enabled: !!params.organizationId,
|
|
staleTime: Infinity,
|
|
}
|
|
);
|
|
|
|
const pro = api.project.get.useQuery(
|
|
{
|
|
id: params.projectId,
|
|
},
|
|
{
|
|
enabled: !!params.projectId,
|
|
staleTime: Infinity,
|
|
}
|
|
);
|
|
|
|
const dashboard = api.dashboard.get.useQuery(
|
|
{
|
|
id: params.dashboardId,
|
|
},
|
|
{
|
|
enabled: !!params.dashboardId,
|
|
staleTime: Infinity,
|
|
}
|
|
);
|
|
|
|
return (
|
|
<div className="border-b border-border text-xs">
|
|
<Container className="flex items-center gap-2 h-8">
|
|
{org.isLoading && pro.isLoading && (
|
|
<div className="animate-pulse bg-slate-200 h-4 w-24 rounded"></div>
|
|
)}
|
|
{org.data && (
|
|
<>
|
|
<HomeIcon size={14} />
|
|
<Link shallow href={`/${org.data.id}`}>
|
|
{org.data.name}
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
{org.data && pro.data && (
|
|
<>
|
|
<ChevronRight size={10} />
|
|
<Link shallow href={`/${org.data.id}/${pro.data.id}`}>
|
|
{pro.data.name}
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
{org.data && pro.data && dashboard.data && (
|
|
<>
|
|
<ChevronRight size={10} />
|
|
<Link
|
|
shallow
|
|
href={`/${org.data.id}/${pro.data.id}/${dashboard.data.id}`}
|
|
>
|
|
{dashboard.data.name}
|
|
</Link>
|
|
</>
|
|
)}
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|