sunzhongyi
5f65d741ed
- Section: responsive prop with media query injection - visual-weights: fontSize clamp() for responsive sizing - variables.css: add border-radius/shadow/transition/z-index tokens - ESLint flat config + Prettier + Changeset init - New components: Footer, NewsSidebar, BreakingNewsBanner - Image/Figure: loading=lazy, aspectRatio, sizes props
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
'use client';
|
|
import React, { ReactNode, CSSProperties } from 'react';
|
|
import { cx } from 'newspaperui-utils';
|
|
|
|
export interface BreakingNewsBannerProps {
|
|
label?: string;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* BreakingNewsBanner — 突发新闻横幅
|
|
*
|
|
* @example
|
|
* <BreakingNewsBanner label="BREAKING">
|
|
* Major earthquake strikes coastal region
|
|
* </BreakingNewsBanner>
|
|
*/
|
|
export const BreakingNewsBanner: React.FC<BreakingNewsBannerProps> = ({
|
|
label = 'BREAKING', className, style, children,
|
|
}) => (
|
|
<div
|
|
className={cx('nui-breaking', className)}
|
|
role="alert"
|
|
style={{
|
|
gridColumn: '1 / -1',
|
|
background: 'var(--nui-accent-primary)',
|
|
color: 'var(--nui-bg-page)',
|
|
padding: 'var(--nui-space-3) var(--nui-space-6)',
|
|
fontFamily: 'var(--font-family-meta)',
|
|
fontSize: '13px',
|
|
fontWeight: 600,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--nui-space-4)',
|
|
...style,
|
|
}}
|
|
>
|
|
<span style={{
|
|
fontVariantCaps: 'small-caps',
|
|
letterSpacing: '0.1em',
|
|
fontWeight: 700,
|
|
flexShrink: 0,
|
|
}}>{label}</span>
|
|
<span style={{ flex: 1 }}>{children}</span>
|
|
</div>
|
|
);
|