50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import { useTranslation } from 'react-i18next'
|
||
|
|
import { RiBookReadLine } from '@remixicon/react'
|
||
|
|
import cn from '@/utils/classnames'
|
||
|
|
import { ReadmeShowType, useReadmePanelStore } from './store'
|
||
|
|
import { BUILTIN_TOOLS_ARRAY } from './constants'
|
||
|
|
import type { PluginDetail } from '../types'
|
||
|
|
|
||
|
|
export const ReadmeEntrance = ({
|
||
|
|
pluginDetail,
|
||
|
|
showType = ReadmeShowType.drawer,
|
||
|
|
className,
|
||
|
|
showShortTip = false,
|
||
|
|
}: {
|
||
|
|
pluginDetail: PluginDetail
|
||
|
|
showType?: ReadmeShowType
|
||
|
|
className?: string
|
||
|
|
showShortTip?: boolean
|
||
|
|
}) => {
|
||
|
|
const { t } = useTranslation()
|
||
|
|
const { setCurrentPluginDetail } = useReadmePanelStore()
|
||
|
|
|
||
|
|
const handleReadmeClick = () => {
|
||
|
|
if (pluginDetail)
|
||
|
|
setCurrentPluginDetail(pluginDetail, showType)
|
||
|
|
}
|
||
|
|
if (!pluginDetail || !pluginDetail?.plugin_unique_identifier || BUILTIN_TOOLS_ARRAY.includes(pluginDetail.id))
|
||
|
|
return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={cn('flex flex-col items-start justify-center gap-2 pb-4 pt-0', showType === ReadmeShowType.drawer && 'px-4', className)}>
|
||
|
|
{!showShortTip && <div className="relative h-1 w-8 shrink-0">
|
||
|
|
<div className="h-px w-full bg-divider-regular"></div>
|
||
|
|
</div>}
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={handleReadmeClick}
|
||
|
|
className="flex w-full items-center justify-start gap-1 text-text-tertiary transition-opacity hover:text-text-accent-light-mode-only"
|
||
|
|
>
|
||
|
|
<div className="relative flex h-3 w-3 items-center justify-center overflow-hidden">
|
||
|
|
<RiBookReadLine className="h-3 w-3" />
|
||
|
|
</div>
|
||
|
|
<span className="text-xs font-normal leading-4">
|
||
|
|
{!showShortTip ? t('plugin.readmeInfo.needHelpCheckReadme') : t('plugin.readmeInfo.title')}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|