dify/web/app/components/datasets/create/step-two/language-select/index.tsx
Stephen Zhou a84c2d36a3
style: format with vp fmt (#38803)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-07-12 15:57:46 +00:00

56 lines
1.7 KiB
TypeScript

'use client'
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import {
Select,
SelectContent,
SelectItem,
SelectItemIndicator,
SelectItemText,
SelectTrigger,
} from '@langgenius/dify-ui/select'
import * as React from 'react'
import { languages } from '@/i18n-config/language'
export type ILanguageSelectProps = {
currentLanguage: string
onSelect: (language: string) => void
disabled?: boolean
}
const LanguageSelect: FC<ILanguageSelectProps> = ({ currentLanguage, onSelect, disabled }) => {
const supportedLanguages = languages.filter((language) => language.supported)
return (
<Select
value={currentLanguage}
onValueChange={(value) => {
if (value == null) return
onSelect(value)
}}
disabled={disabled}
>
<SelectTrigger
size="small"
aria-label="language"
className={cn(
'mx-1 w-auto shrink-0 bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-tertiary-bg',
disabled &&
'cursor-not-allowed bg-components-button-tertiary-bg-disabled text-components-button-tertiary-text-disabled hover:bg-components-button-tertiary-bg-disabled',
)}
>
{currentLanguage || <span>&nbsp;</span>}
</SelectTrigger>
<SelectContent placement="bottom-start" sideOffset={4} popupClassName="w-max">
{supportedLanguages.map(({ prompt_name }) => (
<SelectItem key={prompt_name} value={prompt_name}>
<SelectItemText>{prompt_name}</SelectItemText>
<SelectItemIndicator />
</SelectItem>
))}
</SelectContent>
</Select>
)
}
export default React.memo(LanguageSelect)