chore: initial import

apps/visualizer/src/features/tickerbar/TickerBar.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+export type TickerItem = {
+  key: string;
+  label: ReactNode;
+  changePct: number;
+  active?: boolean;
+};
+
+type Props = {
+  items: TickerItem[];
+};
+
+function formatPct(v: number): string {
+  const s = v >= 0 ? '+' : '';
+  return `${s}${v.toFixed(2)}%`;
+}
+
+export default function TickerBar({ items }: Props) {
+  return (
+    <div className="tickerBar">
+      {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>
+  );
+}
+