mirror of
https://github.com/langgenius/dify.git
synced 2026-03-20 14:07:59 +08:00
9e10b73b54
Migrate all Remixicon component imports in workflow/skill to Tailwind CSS icon utility classes (i-ri-*), reducing JS bundle size. Update MenuItem to accept string icon classes alongside React components. Adjust test selectors that relied on SVG element queries.
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import type { SkillTemplateSummary } from './templates/types'
|
|
import { memo } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import AppIcon from '@/app/components/base/app-icon'
|
|
import Button from '@/app/components/base/button'
|
|
|
|
type TemplateCardProps = {
|
|
template: SkillTemplateSummary
|
|
added?: boolean
|
|
disabled?: boolean
|
|
loading?: boolean
|
|
onUse: (template: SkillTemplateSummary) => void
|
|
}
|
|
|
|
const TemplateCard = ({ template, added, disabled, loading, onUse }: TemplateCardProps) => {
|
|
const { t } = useTranslation('workflow')
|
|
|
|
return (
|
|
<div className="group flex h-full flex-col overflow-hidden rounded-xl border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg transition-colors hover:bg-components-panel-on-panel-item-bg-hover">
|
|
<div className="flex items-center gap-3 px-4 pb-2 pt-4">
|
|
<AppIcon
|
|
size="large"
|
|
icon="📙"
|
|
className="!bg-components-icon-bg-violet-soft"
|
|
/>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-0.5 py-px">
|
|
<span className="truncate text-text-secondary system-md-semibold">
|
|
{template.name}
|
|
</span>
|
|
<span className="text-text-tertiary system-xs-regular">
|
|
{t('skill.startTab.filesIncluded', { count: template.fileCount })}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-1 flex-col px-4 py-1">
|
|
<p className="line-clamp-2 min-h-[32px] w-full text-text-tertiary system-xs-regular">
|
|
{template.description}
|
|
</p>
|
|
</div>
|
|
<div className="relative px-4 pb-4">
|
|
<div className="h-[18px]" />
|
|
<div className="pointer-events-none absolute inset-0 flex items-end px-4 pb-4 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
|
|
{added
|
|
? (
|
|
<Button
|
|
variant="secondary"
|
|
size="medium"
|
|
className="w-full"
|
|
disabled
|
|
>
|
|
<span className="i-ri-check-line mr-0.5 h-4 w-4" />
|
|
{t('skill.startTab.skillAdded')}
|
|
</Button>
|
|
)
|
|
: (
|
|
<Button
|
|
variant="primary"
|
|
size="medium"
|
|
className="w-full"
|
|
disabled={disabled}
|
|
loading={loading}
|
|
onClick={() => onUse(template)}
|
|
>
|
|
<span className="i-ri-add-line mr-0.5 h-4 w-4" />
|
|
{t('skill.startTab.useThisSkill')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(TemplateCard)
|