64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
import { useContext } from 'use-context-selector'
|
|
import { useTranslation } from 'react-i18next'
|
|
import type { Plugin } from '@/app/components/plugins/types'
|
|
import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
|
|
import I18n from '@/context/i18n'
|
|
import { useBoolean } from 'ahooks'
|
|
import { BlockEnum } from '../../types'
|
|
import BlockIcon from '../../block-icon'
|
|
|
|
type UninstalledItemProps = {
|
|
payload: Plugin
|
|
}
|
|
|
|
const UninstalledItem = ({
|
|
payload,
|
|
}: UninstalledItemProps) => {
|
|
const { t } = useTranslation()
|
|
const { locale } = useContext(I18n)
|
|
|
|
const getLocalizedText = (obj: Record<string, string> | undefined) =>
|
|
obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
|
|
const [isShowInstallModal, {
|
|
setTrue: showInstallModal,
|
|
setFalse: hideInstallModal,
|
|
}] = useBoolean(false)
|
|
|
|
return (
|
|
<div className='flex h-8 items-center rounded-lg pl-3 pr-2 hover:bg-state-base-hover'>
|
|
<BlockIcon
|
|
className='shrink-0'
|
|
type={BlockEnum.Tool}
|
|
toolIcon={payload.icon}
|
|
/>
|
|
<div className='ml-2 flex w-0 grow items-center'>
|
|
<div className='flex w-0 grow items-center gap-x-2'>
|
|
<span className='system-sm-regular truncate text-text-primary'>
|
|
{getLocalizedText(payload.label)}
|
|
</span>
|
|
<span className='system-xs-regular text-text-quaternary'>
|
|
{payload.org}
|
|
</span>
|
|
</div>
|
|
<div
|
|
className='system-xs-medium cursor-pointer pl-1.5 text-components-button-secondary-accent-text'
|
|
onClick={showInstallModal}
|
|
>
|
|
{t('plugin.installAction')}
|
|
</div>
|
|
{isShowInstallModal && (
|
|
<InstallFromMarketplace
|
|
uniqueIdentifier={payload.latest_package_identifier}
|
|
manifest={payload}
|
|
onSuccess={hideInstallModal}
|
|
onClose={hideInstallModal}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default React.memo(UninstalledItem)
|