Files
newsui/packages/docs/app/blocks/zh-editorial/page.tsx
T
sunzhongyi 1f09bba3ef feat: complete newspaperui component library with docs site
- 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>
2026-05-20 14:22:14 +08:00

113 lines
9.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
'use client';
import { Layout, Section, Article, Rule, BodyText, Quote } from '@newspaperui/components';
const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
const cnRed = { color: 'var(--nui-accent-cjk-red)' };
export default function ZhEditorial() {
return (
<Layout columns={24} maxWidth="1200px" padding="2rem 1.5rem">
{/* 社论报头 */}
<header style={{
borderTop: '3px solid var(--nui-text-primary)',
borderBottom: '1px solid var(--nui-rule-hairline)',
padding: '0.75rem 0',
marginBottom: '2rem',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'baseline',
}}>
<h1 style={{ ...cn, fontSize: '28px', fontWeight: 900, margin: 0, letterSpacing: '0.1em' }}> </h1>
<div style={{ ...cn, ...cnRed, fontSize: '14px', fontWeight: 600 }}>· ·</div>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)' }}>2026 5 19 · A2 </div>
</header>
{/* 双栏对开 */}
<Section columns={24} gap="2rem">
{/* 左侧:主社论 */}
<Article span={14} style={{ borderRight: '1px solid var(--nui-rule-hairline)', paddingRight: '2rem' }}>
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}></div>
<h2 style={{ ...cn, fontSize: '36px', fontWeight: 900, lineHeight: 1.2, color: 'var(--nui-text-primary)', margin: '0 0 0.75rem 0' }}>
</h2>
<h3 style={{ ...cn, fontSize: '18px', fontWeight: 500, lineHeight: 1.5, color: 'var(--nui-text-secondary)', margin: '0 0 1.5rem 0' }}>
</h3>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1.5rem' }}>
</div>
<BodyText weight="High" columns={2} dropCap style={cn}>
<p></p>
<p></p>
<p>齿</p>
<p>2028 线</p>
<p></p>
<p></p>
<p></p>
<p></p>
</BodyText>
</Article>
{/* 右侧:专家评论 + 读者来信 */}
<Article span={10}>
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}></div>
<h3 style={{ ...cn, fontSize: '24px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>
</h3>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
·
</div>
<BodyText weight="Medium" style={cn}>
<p></p>
<p>线</p>
<p></p>
</BodyText>
<Rule variant="hairline" style={{ margin: '1.5rem 0' }} />
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}></div>
<h3 style={{ ...cn, fontSize: '24px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>
</h3>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
·
</div>
<BodyText weight="Medium" style={cn}>
<p></p>
<p></p>
</BodyText>
<Rule variant="hairline" style={{ margin: '1.5rem 0' }} />
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}></div>
<Quote variant="block" weight="Medium" style={cn}>
<p>线</p>
</Quote>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
·
</div>
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
<Quote variant="block" weight="Medium" style={cn}>
<p></p>
</Quote>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
·
</div>
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
<Quote variant="block" weight="Medium" style={cn}>
<p></p>
</Quote>
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
·
</div>
</Article>
</Section>
</Layout>
);
}