sunzhongyi
1f09bba3ef
- 18 React components (Layout/Section/Article/Layer/Masthead/Rule + Headline/Subhead/Kicker/BodyText/Quote/Byline/Dateline/Caption + Image/Figure/Video/PullQuote) - Theme: warm off-white palette, Source Serif 4 / Cormorant Garamond / Inter / Noto Serif SC/JP, visual weight mapping, dark mode - Docs: Landing page, 6 Blocks (zh/en/jp), component API docs - GitHub Pages deployment via static export Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
'use client';
|
||
import React, { ReactNode, CSSProperties } from 'react';
|
||
import { visualWeights, resolveFontSize } from '@newspaperui/theme';
|
||
import { cx } from '@newspaperui/utils';
|
||
|
||
export interface CaptionProps {
|
||
credit?: string; // e.g. "Photograph by Jane Doe"
|
||
className?: string;
|
||
style?: CSSProperties;
|
||
children: ReactNode;
|
||
}
|
||
|
||
/**
|
||
* Caption — 图片说明（italic + credit small-caps）
|
||
*
|
||
* - 主体文字为 italic 衬线，描述图片内容
|
||
* - credit 部分以 small-caps 显示摄影师/来源信息
|
||
* - 渲染为 figcaption，语义化配合 Figure 使用
|
||
*
|
||
* @example
|
||
* <Caption credit="Photograph by Jane Doe">
|
||
* A view of the city skyline at sunset.
|
||
* </Caption>
|
||
*/
|
||
export const Caption: React.FC<CaptionProps> = ({ credit, className, style, children }) => {
|
||
const config = visualWeights.Caption.Standard!;
|
||
return (
|
||
<figcaption
|
||
className={cx('nui-caption 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,
|
||
...style,
|
||
}}
|
||
>
|
||
{children}
|
||
{credit && (
|
||
<span
|
||
className="nui-small-caps"
|
||
style={{
|
||
display: 'inline-block',
|
||
marginLeft: 'var(--nui-space-2)',
|
||
fontSize: '11px',
|
||
color: 'var(--nui-text-muted)',
|
||
fontStyle: 'normal',
|
||
letterSpacing: '0.06em',
|
||
}}
|
||
>
|
||
{credit}
|
||
</span>
|
||
)}
|
||
</figcaption>
|
||
);
|
||
};
|