110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
'use client'
|
|
import React, { useEffect, useState } from 'react'
|
|
import type { FC } from 'react'
|
|
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
|
|
import { RiVerifiedBadgeLine } from '@remixicon/react'
|
|
import Badge from '../../base/badge'
|
|
import type { Plugin } from '../types'
|
|
import Description from '../card/base/description'
|
|
import Icon from '../card/base/card-icon'
|
|
import Title from '../card/base/title'
|
|
import DownloadCount from '../card/base/download-count'
|
|
import type { Locale } from '@/i18n'
|
|
import { fetchPluginDetail } from '@/app/(commonLayout)/plugins/test/card/actions'
|
|
import Drawer from '@/app/components/base/drawer'
|
|
import Loading from '@/app/components/base/loading'
|
|
import cn from '@/utils/classnames'
|
|
import {
|
|
// extensionDallE,
|
|
// modelGPT4,
|
|
toolNotion,
|
|
} from '@/app/components/plugins/card/card-mock'
|
|
|
|
type Props = {
|
|
locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
|
|
}
|
|
|
|
const PluginDetailPanel: FC<Props> = ({
|
|
locale,
|
|
}) => {
|
|
const searchParams = useSearchParams()
|
|
const pluginID = searchParams.get('pluginID')
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const [loading, setLoading] = useState(true)
|
|
const [pluginDetail, setPluginDetail] = useState<Plugin>()
|
|
|
|
const getPluginDetail = async (pluginID: string) => {
|
|
setLoading(true)
|
|
const detail = await fetchPluginDetail(pluginID)
|
|
setPluginDetail({
|
|
...detail,
|
|
...toolNotion,
|
|
} as any)
|
|
setLoading(false)
|
|
}
|
|
|
|
const handleClose = () => {
|
|
setPluginDetail(undefined)
|
|
router.replace(pathname)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (pluginID)
|
|
getPluginDetail(pluginID)
|
|
}, [pluginID])
|
|
|
|
if (!pluginID)
|
|
return null
|
|
|
|
return (
|
|
<Drawer
|
|
isOpen={!!pluginDetail}
|
|
clickOutsideNotOpen={false}
|
|
onClose={handleClose}
|
|
footer={null}
|
|
mask={false}
|
|
positionCenter={false}
|
|
panelClassname={cn('mt-[65px] !w-[405px] !max-w-[405px]')}
|
|
>
|
|
{loading && <Loading type='area' />}
|
|
{!loading && pluginDetail && (
|
|
<div
|
|
className={cn('w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl')}
|
|
style={{
|
|
height: 'calc(100vh - 65px)',
|
|
}}
|
|
>
|
|
<div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs')}>
|
|
{/* Header */}
|
|
<div className="flex">
|
|
<Icon src={pluginDetail.icon} />
|
|
<div className="ml-3 w-0 grow">
|
|
<div className="flex items-center h-5">
|
|
<Title title={pluginDetail.label[locale]} />
|
|
<RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
|
|
</div>
|
|
<div className='mb-1 flex justify-between items-center h-4'>
|
|
<div className='flex items-center'>
|
|
<div className='text-text-tertiary system-xs-regular'>{pluginDetail.org}</div>
|
|
<div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
|
|
<DownloadCount downloadCount={pluginDetail.install_count || 0} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Description className='mt-3' text={pluginDetail.brief[locale]} descriptionLineRows={2}></Description>
|
|
<div className='mt-3 flex space-x-0.5'>
|
|
{['LLM', 'text embedding', 'speech2text'].map(tag => (
|
|
<Badge key={tag} text={tag} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Drawer>
|
|
)
|
|
}
|
|
|
|
export default PluginDetailPanel
|