File size: 1,798 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
'use client'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import exploreI18n from '@/i18n/en-US/explore'
import type { AppCategory } from '@/models/explore'
import { ThumbsUp } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
const categoryI18n = exploreI18n.category
export type ICategoryProps = {
className?: string
list: AppCategory[]
value: string
onChange: (value: AppCategory | string) => void
/**
* default value for searchparam 'category' in en
*/
allCategoriesEn: string
}
const Category: FC<ICategoryProps> = ({
className,
list,
value,
onChange,
allCategoriesEn,
}) => {
const { t } = useTranslation()
const isAllCategories = !list.includes(value)
const itemClassName = (isSelected: boolean) => cn(
'flex items-center px-3 py-[7px] h-[32px] rounded-lg border-[0.5px] border-transparent text-gray-700 font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
isSelected && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white',
)
return (
<div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}>
<div
className={itemClassName(isAllCategories)}
onClick={() => onChange(allCategoriesEn)}
>
<ThumbsUp className='mr-1 w-3.5 h-3.5'/>
{t('explore.apps.allCategories')}
</div>
{list.map(name => (
<div
key={name}
className={itemClassName(name === value)}
onClick={() => onChange(name)}
>
{categoryI18n[name] ? t(`explore.category.${name}`) : name}
</div>
))}
</div>
)
}
export default React.memo(Category)
|