mirror of
https://github.com/langgenius/dify.git
synced 2026-05-02 08:28:03 +08:00
4d465d6cf9
Refactor StartTabContent into separate components following Figma design specs: - ActionCard: reusable card with icon, title, description - SectionHeader: title/xl-semi-bold header with description - CreateImportSection: 3-column grid layout for Create/Import cards - SkillTemplatesSection: templates area with placeholder Align styles with Figma: 3-col grid, 16px title, proper spacing and padding. Add i18n translations for all user-facing text (en-US, zh-Hans).
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import type { FC, ReactNode } from 'react'
|
|
import { memo } from 'react'
|
|
import { cn } from '@/utils/classnames'
|
|
|
|
type ActionCardProps = {
|
|
icon: ReactNode
|
|
title: string
|
|
description: string
|
|
onClick?: () => void
|
|
}
|
|
|
|
const ActionCard: FC<ActionCardProps> = ({
|
|
icon,
|
|
title,
|
|
description,
|
|
onClick,
|
|
}) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
'flex items-start gap-3 rounded-xl border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-4',
|
|
'hover:bg-components-panel-on-panel-item-bg-hover',
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-components-input-border-active',
|
|
'text-left transition-colors',
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<div
|
|
className="flex size-10 shrink-0 items-center justify-center rounded-[10px] border border-dashed border-divider-regular bg-background-section"
|
|
aria-hidden="true"
|
|
>
|
|
{icon}
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-0.5 py-px">
|
|
<span className="system-md-semibold truncate text-text-secondary">
|
|
{title}
|
|
</span>
|
|
<span className="system-xs-regular text-text-tertiary">
|
|
{description}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default memo(ActionCard)
|