Market ticker

import { Badge, ScrollRegion, Separator } from "@paxeer/core";

export interface TickerQuote {
  symbol: string;
  last: number;
  change: number;
}

export function MarketTicker({
  quotes = [
    { symbol: "ETH-USD", last: 2480.4, change: 1.2 },
    { symbol: "BTC-USD", last: 64120, change: -0.4 },
    { symbol: "SOL-USD", last: 138.6, change: -2.1 },
    { symbol: "PAX-USD", last: 1.0, change: 0.0 },
  ],
}: {
  quotes?: TickerQuote[];
}) {
  return (
    <div
      data-slot="market-ticker"
      className="rounded-[var(--md-sys-shape-corner-medium)] border border-outline-variant bg-surface-container-low"
    >
      <ScrollRegion orientation="horizontal" label="Market ticker" className="w-full">
        <div className="flex h-10 min-w-max items-center gap-3 px-3">
          {quotes.map((quote, index) => (
            <div key={quote.symbol} className="flex items-center gap-3">
              {index > 0 ? <Separator orientation="vertical" className="h-5" /> : null}
              <span className="font-[family-name:var(--md-ref-typeface-mono)] text-[length:var(--md-sys-typescale-label-large-size)]">
                {quote.symbol}
              </span>
              <span className="font-[family-name:var(--md-ref-typeface-mono)]">
                {quote.last.toFixed(2)}
              </span>
              <Badge variant={quote.change >= 0 ? "default" : "destructive"}>
                {quote.change >= 0 ? "+" : ""}
                {quote.change.toFixed(1)}%
              </Badge>
            </div>
          ))}
        </div>
      </ScrollRegion>
    </div>
  );
}