32 lines
825 B
TypeScript
32 lines
825 B
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export type TickerItem = {
|
|
key: string;
|
|
label: ReactNode;
|
|
changePct: number;
|
|
active?: boolean;
|
|
};
|
|
|
|
type Props = {
|
|
items: TickerItem[];
|
|
className?: string;
|
|
};
|
|
|
|
function formatPct(v: number): string {
|
|
const s = v >= 0 ? '+' : '';
|
|
return `${s}${v.toFixed(2)}%`;
|
|
}
|
|
|
|
export default function TickerBar({ items, className }: Props) {
|
|
return (
|
|
<div className={['tickerBar', className].filter(Boolean).join(' ')}>
|
|
{items.map((t) => (
|
|
<div key={t.key} className={['ticker', t.active ? 'ticker--active' : ''].filter(Boolean).join(' ')}>
|
|
<span className="ticker__label">{t.label}</span>
|
|
<span className={['ticker__pct', t.changePct >= 0 ? 'pos' : 'neg'].join(' ')}>{formatPct(t.changePct)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|