mirror of
https://github.com/langgenius/dify.git
synced 2026-07-21 10:38:32 +08:00
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'use client'
|
|
import type { AppCategory } from '@/models/explore'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import { RadioGroup, RadioItem } from '@langgenius/dify-ui/radio'
|
|
import { useTranslation } from 'react-i18next'
|
|
import exploreI18n from '@/i18n/en-US/explore.json'
|
|
|
|
type ICategoryProps = {
|
|
className?: string
|
|
list: AppCategory[]
|
|
value: string
|
|
onChange: (value: AppCategory | string) => void
|
|
/**
|
|
* default value for search param 'category' in en
|
|
*/
|
|
allCategoriesEn: string
|
|
}
|
|
|
|
function Category({
|
|
className,
|
|
list,
|
|
value,
|
|
onChange,
|
|
allCategoriesEn,
|
|
}: ICategoryProps) {
|
|
const { t } = useTranslation()
|
|
const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn
|
|
const selectedCategory = isAllCategories ? allCategoriesEn : value
|
|
|
|
const renderCategoryName = (name: AppCategory) => {
|
|
const categoryKey = `category.${name}` as keyof typeof exploreI18n
|
|
return categoryKey in exploreI18n ? t(categoryKey, { ns: 'explore' }) : name
|
|
}
|
|
|
|
const handleValueChange = (nextCategory: string) => {
|
|
if (nextCategory)
|
|
onChange(nextCategory)
|
|
}
|
|
|
|
return (
|
|
<RadioGroup
|
|
aria-label={t('tryApp.category', { ns: 'explore' })}
|
|
className={cn(className, 'flex max-w-full flex-wrap items-start gap-1 overflow-visible rounded-none bg-transparent p-0 text-[13px]')}
|
|
value={selectedCategory}
|
|
onValueChange={handleValueChange}
|
|
>
|
|
{[
|
|
{ name: allCategoriesEn, label: t('apps.allCategories', { ns: 'explore' }), isAll: true },
|
|
...list.filter(name => name !== allCategoriesEn).map(name => ({
|
|
name,
|
|
label: renderCategoryName(name),
|
|
isAll: false,
|
|
})),
|
|
].map(item => (
|
|
<RadioItem
|
|
key={item.isAll ? 'all' : item.name}
|
|
value={item.name}
|
|
nativeButton
|
|
render={<button type="button" />}
|
|
className="h-8 min-w-12 shrink-0 cursor-pointer touch-manipulation rounded-lg border-0 px-2.5 py-2 text-center system-sm-medium text-text-tertiary shadow-none transition-colors hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden data-checked:border-0 data-checked:bg-state-base-active data-checked:system-sm-semibold data-checked:text-text-secondary data-checked:shadow-none motion-reduce:transition-none"
|
|
>
|
|
{item.label}
|
|
</RadioItem>
|
|
))}
|
|
</RadioGroup>
|
|
)
|
|
}
|
|
|
|
export default Category
|