File size: 1,427 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 |
'use client'
import type { FC } from 'react'
import React from 'react'
import { useContext } from 'use-context-selector'
import cn from 'classnames'
import AppIcon from '../../base/app-icon'
import type { Collection } from '@/app/components/tools/types'
import I18n from '@/context/i18n'
import { getLanguage } from '@/i18n/language'
type Props = {
isCurrent: boolean
payload: Collection
onClick: () => void
}
const Item: FC<Props> = ({
isCurrent,
payload,
onClick,
}) => {
const { locale } = useContext(I18n)
const language = getLanguage(locale)
return (
<div
className={cn(isCurrent && 'bg-white shadow-xs rounded-lg', 'mt-1 flex h-9 items-center px-2 space-x-2 cursor-pointer')}
onClick={() => !isCurrent && onClick()}
>
{typeof payload.icon === 'string'
? (
<div
className='w-6 h-6 bg-cover bg-center rounded-md'
style={{
backgroundImage: `url(${payload.icon})`,
}}
></div>
)
: (
<AppIcon
size='tiny'
icon={payload.icon.content}
background={payload.icon.background}
/>
)}
<div className={cn(isCurrent && 'text-primary-600 font-semibold', 'leading-5 text-sm font-normal truncate')}>{payload.label[language]}</div>
</div>
)
}
export default React.memo(Item)
|