You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.1 KiB
33 lines
1.1 KiB
import type { ReactElement } from 'react' |
|
import { getLanguageDisplayParts } from '@/lib/language-display-meta' |
|
import { cn } from '@/lib/utils' |
|
|
|
type LinesProps = { |
|
tag: string |
|
/** Tighter layout for nested menus */ |
|
compact?: boolean |
|
className?: string |
|
} |
|
|
|
/** Three-line block: code (mono) · English · native — for `SelectItem` / menus. */ |
|
export function LanguageSelectOptionLines({ tag, compact, className }: LinesProps): ReactElement { |
|
const p = getLanguageDisplayParts(tag) |
|
return ( |
|
<div className={cn('flex flex-col gap-0.5 text-left', compact && 'max-w-[14rem]', className)}> |
|
<span |
|
className={cn( |
|
'font-mono text-muted-foreground tabular-nums', |
|
compact ? 'text-[10px]' : 'text-xs' |
|
)} |
|
> |
|
{p.codeLabel} |
|
</span> |
|
<span className={cn('font-medium leading-tight', compact ? 'text-xs' : 'text-sm')}> |
|
{p.englishName} |
|
</span> |
|
<span className={cn('text-muted-foreground leading-tight', compact ? 'text-[10px]' : 'text-xs')}> |
|
{p.nativeName} |
|
</span> |
|
</div> |
|
) |
|
}
|
|
|