sunzhongyi
941df8d79f
macOS is case-insensitive but Linux CI is case-sensitive. Git was tracking uppercase Layout/Text/Media but imports used lowercase. Renamed via git mv to make both consistent (lowercase). Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
'use client';
|
||
import React, { ReactNode, CSSProperties } from 'react';
|
||
import { visualWeights, resolveFontSize } from '@newspaperui/theme';
|
||
import { clampSpan, cx } from '@newspaperui/utils';
|
||
import { useSection } from '../layout/Section';
|
||
|
||
export interface SubheadProps {
|
||
weight?: 'High' | 'Medium';
|
||
span?: number;
|
||
as?: 'h2' | 'h3' | 'h4' | 'p';
|
||
className?: string;
|
||
style?: CSSProperties;
|
||
children: ReactNode;
|
||
}
|
||
|
||
/**
|
||
* Subhead — 副标题（italic 衬线）
|
||
*
|
||
* - 默认 italic 衬线风格，视觉层级低于 Headline
|
||
* - 支持 High/Medium 两档 weight
|
||
* - 可通过 as 指定渲染标签（h2/h3/h4/p）
|
||
*
|
||
* @example
|
||
* <Subhead weight="Medium" span={14}>
|
||
* A deeper look into the story behind the headlines
|
||
* </Subhead>
|
||
*/
|
||
export const Subhead: React.FC<SubheadProps> = ({
|
||
weight = 'Medium', span, as = 'p', className, style, children,
|
||
}) => {
|
||
const section = useSection();
|
||
const config = visualWeights.Subhead[weight]!;
|
||
const Tag = as as keyof JSX.IntrinsicElements;
|
||
const cols = span ? clampSpan(span, section.columns) : undefined;
|
||
return (
|
||
<Tag
|
||
className={cx('nui-subhead nui-osf', className)}
|
||
style={{
|
||
fontFamily: `var(${config.fontFamily})`,
|
||
fontSize: resolveFontSize(config.fontSize),
|
||
fontWeight: config.fontWeight,
|
||
fontStyle: config.fontStyle,
|
||
lineHeight: config.lineHeight,
|
||
color: `var(${config.color})`,
|
||
margin: config.margin,
|
||
gridColumn: cols ? `span ${cols}` : undefined,
|
||
...style,
|
||
}}
|
||
data-weight={weight}
|
||
>
|
||
{children}
|
||
</Tag>
|
||
);
|
||
};
|