import React from 'react' import Link from 'next/link' import { RepositoryKind } from '@/lib/gql/generates/graphql' import { cn } from '@/lib/utils' import { CopyButton } from '@/components/copy-button' import { SourceCodeBrowserContext } from './source-code-browser' import { generateEntryPath, resolveFileNameFromPath } from './utils' interface FileDirectoryBreadcrumbProps extends React.HTMLAttributes {} const FileDirectoryBreadcrumb: React.FC = ({ className }) => { const { currentFileRoutes, activeRepo, activeEntryInfo } = React.useContext( SourceCodeBrowserContext ) const basename = activeEntryInfo?.basename const routes: Array<{ name: string href: string kind?: RepositoryKind }> = React.useMemo(() => { const basename = activeEntryInfo?.basename let result = [ { name: activeEntryInfo?.repositoryName ?? '', href: generateEntryPath(activeRepo, activeEntryInfo.rev, '', 'dir') } ] if (basename) { const pathSegments = decodeURIComponent(basename).split('/') || [] for (let i = 0; i < pathSegments.length; i++) { const p = pathSegments.slice(0, i + 1).join('/') const name = resolveFileNameFromPath(p) result.push({ name: decodeURIComponent(name), href: generateEntryPath(activeRepo, activeEntryInfo.rev, p, 'dir') }) } } return result }, [activeEntryInfo, activeRepo]) return (

Repositories

{routes?.map((route, idx) => { const isRepo = idx === 0 && routes?.length > 1 const isActiveFile = idx === routes.length - 1 const classname = cn( 'whitespace-nowrap', isRepo || isActiveFile ? 'font-bold' : 'font-medium', isActiveFile ? '' : 'cursor-pointer text-primary hover:underline', isRepo ? 'hover:underline' : undefined ) return ( {isActiveFile ? (

{route.name}

) : ( {route.name} )} {!isActiveFile &&

} ) })}

{!!currentFileRoutes?.length && !!basename && ( )}

) } export { FileDirectoryBreadcrumb }