34 lines
971 B
TypeScript
34 lines
971 B
TypeScript
import { Space, Title } from '@stash/ui'
|
|
import type { ReactNode } from 'react'
|
|
|
|
/**
|
|
* 明细页的分组块：色条 + 小标题 + 该组的内容网格。
|
|
*
|
|
* 色条沿用分区的 `barColor`，与首页卡片标题保持同一套视觉语言；
|
|
* 具体网格由调用方传入（应用 / 海报 / 图文共用同一层外壳）。
|
|
*/
|
|
type GroupBlockProps = {
|
|
name: string
|
|
/** 分区色条颜色；缺省用主题主色 */
|
|
barColor?: string
|
|
children: ReactNode
|
|
}
|
|
|
|
export function GroupBlock({ name, barColor, children }: GroupBlockProps) {
|
|
return (
|
|
<Space direction="column" gap="sm" align="stretch" className="group-block">
|
|
<div className="group-title">
|
|
<span
|
|
className="group-bar"
|
|
style={barColor !== undefined ? { backgroundColor: barColor } : undefined}
|
|
aria-hidden="true"
|
|
/>
|
|
<Title level={4} as="h3">
|
|
{name}
|
|
</Title>
|
|
</div>
|
|
{children}
|
|
</Space>
|
|
)
|
|
}
|