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>
|
||
|
|
);
|