import React from 'react' import classNames from 'classnames' import type { SearchMatch } from '@sourcegraph/shared/src/search/stream' import type { ForwardReferenceExoticComponent } from '@sourcegraph/wildcard' import { formatRepositoryStarCount } from '../../util/stars' import { CodeHostIcon } from '../CodeHostIcon' import { LastSyncedIcon } from '../LastSyncedIcon' import { SearchResultStar } from '../SearchResultStar' import styles from './OldResultContainer.module.scss' export interface ResultContainerProps { index: number title: React.ReactNode titleClassName?: string resultClassName?: string repoStars?: number repoLastFetched?: string resultType?: SearchMatch['type'] repoName?: string className?: string rankingDebug?: string onResultClicked?: () => void } const accessibleResultType: Record = { symbol: 'symbol', content: 'file content', repo: 'repository', path: 'file path', commit: 'commit', person: 'person', team: 'team', } /** * The container component for a result in the SearchResults component. */ export const OldResultContainer: ForwardReferenceExoticComponent< React.ElementType, React.PropsWithChildren > = React.forwardRef(function ResultContainer(props, reference) { const { children, title, titleClassName, resultClassName, index, repoStars, resultType, repoName, className, rankingDebug, as: Component = 'div', onResultClicked, repoLastFetched, } = props const formattedRepositoryStarCount = formatRepositoryStarCount(repoStars) const trackReferencePanelClick = (): void => onResultClicked?.() return (

{/* Add a result type to be read out to screen readers only, so that screen reader users can easily scan the search results list (for example, by navigating by landmarks). */} {resultType ? accessibleResultType[resultType] : 'search'} result, {repoName && }

{title}

{formattedRepositoryStarCount && ( {formattedRepositoryStarCount} )} {repoLastFetched && }

{rankingDebug &&

{rankingDebug}

} {children &&

{children}

}

) })