feat(skill-editor): implement StartTabContent with modular component structure

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).
This commit is contained in:
yyh
2026-01-23 14:22:58 +08:00
parent 083f45678d
commit 4d465d6cf9
9 changed files with 162 additions and 24 deletions

View File

@ -0,0 +1,27 @@
'use client'
import type { FC } from 'react'
import { memo } from 'react'
type SectionHeaderProps = {
title: string
description: string
}
const SectionHeader: FC<SectionHeaderProps> = ({
title,
description,
}) => {
return (
<header className="mb-3 flex flex-col gap-0.5">
<h2 className="title-xl-semi-bold text-text-primary">
{title}
</h2>
<p className="system-xs-regular text-text-tertiary">
{description}
</p>
</header>
)
}
export default memo(SectionHeader)