mirror of
https://github.com/langgenius/dify.git
synced 2026-04-28 14:38:06 +08:00
a91d709aa5
Add filter controls for skill templates: - CategoryTabs: tab navigation with mock categories (All, Productivity, etc.) - TemplateSearch: search input with accessibility attributes - Grid layout fix to prevent tab width changes on font-weight switch Update SectionHeader to accept className prop for flexible styling. Add search placeholder i18n translations.
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import type { FC } from 'react'
|
|
import { memo, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import CategoryTabs from './category-tabs'
|
|
import SectionHeader from './section-header'
|
|
import TemplateSearch from './template-search'
|
|
|
|
const SkillTemplatesSection: FC = () => {
|
|
const { t } = useTranslation('workflow')
|
|
const [activeCategory, setActiveCategory] = useState('all')
|
|
const [searchValue, setSearchValue] = useState('')
|
|
|
|
return (
|
|
<section className="flex flex-col gap-3 px-6 py-2">
|
|
<SectionHeader
|
|
title={t('skill.startTab.templatesTitle')}
|
|
description={t('skill.startTab.templatesDesc')}
|
|
/>
|
|
<div className="flex w-full items-start gap-1">
|
|
<CategoryTabs
|
|
activeCategory={activeCategory}
|
|
onCategoryChange={setActiveCategory}
|
|
/>
|
|
<TemplateSearch
|
|
value={searchValue}
|
|
onChange={setSearchValue}
|
|
/>
|
|
</div>
|
|
<div className="flex min-h-[200px] items-center justify-center rounded-xl border border-dashed border-divider-regular bg-background-section-burn">
|
|
<span className="system-sm-regular text-text-quaternary">
|
|
{t('skill.startTab.templatesComingSoon')}
|
|
</span>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default memo(SkillTemplatesSection)
|