File size: 3,257 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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
'use client'
import type { FC } from 'react'
import React from 'react'
import { useContext } from 'use-context-selector'
import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import type { Collection } from '../types'
import { CollectionType, LOC } from '../types'
import { Settings01 } from '../../base/icons/src/vender/line/general'
import I18n from '@/context/i18n'
import { getLanguage } from '@/i18n/language'
type Props = {
icon: JSX.Element
collection: Collection
loc: LOC
onShowAuth: () => void
onShowEditCustomCollection: () => void
}
const Header: FC<Props> = ({
icon,
collection,
loc,
onShowAuth,
onShowEditCustomCollection,
}) => {
const { locale } = useContext(I18n)
const language = getLanguage(locale)
const { t } = useTranslation()
const isInToolsPage = loc === LOC.tools
const isInDebugPage = !isInToolsPage
const needAuth = collection?.allow_delete || collection?.type === CollectionType.model
const isAuthed = collection.is_team_authorization
return (
<div className={cn(isInToolsPage ? 'py-4 px-6' : 'py-[11px] pl-4 pr-3', 'flex justify-between items-start border-b border-gray-200')}>
<div className='flex items-start w-full'>
{icon}
<div className='ml-3 grow w-0'>
<div className='flex items-center h-6 space-x-1'>
<div className={cn(isInDebugPage && 'truncate', 'text-base font-semibold text-gray-900')}>{collection.label[language]}</div>
<div className='text-xs font-normal text-gray-500'>·</div>
<div className='text-xs font-normal text-gray-500'>{t('tools.author')} {collection.author}</div>
</div>
{collection.description && (
<div className={cn('leading-[18px] text-[13px] font-normal text-gray-500')}>
{collection.description[language]}
</div>
)}
</div>
</div>
{(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && needAuth && (
<div
className={cn('cursor-pointer', 'ml-1 shrink-0 flex items-center h-8 border border-gray-200 rounded-lg px-3 space-x-2 shadow-xs')}
onClick={() => {
if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
onShowAuth()
}}
>
<div className={cn(isAuthed ? 'border-[#12B76A] bg-[#32D583]' : 'border-gray-400 bg-gray-300', 'rounded h-2 w-2 border')}></div>
<div className='leading-5 text-sm font-medium text-gray-700'>{t(`tools.auth.${isAuthed ? 'authorized' : 'unauthorized'}`)}</div>
</div>
)}
{collection.type === CollectionType.custom && (
<div
className={cn('cursor-pointer', 'ml-1 shrink-0 flex items-center h-8 border border-gray-200 rounded-lg px-3 space-x-2 shadow-xs')}
onClick={() => onShowEditCustomCollection()}
>
<Settings01 className='w-4 h-4 text-gray-700' />
<div className='leading-5 text-sm font-medium text-gray-700'>{t('tools.createTool.editAction')}</div>
</div>
)}
</div >
)
}
export default React.memo(Header)
|