Stock ticker logos

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

const HOLDINGS = [
  { symbol: "AAPL", name: "Apple Inc.", price: "227.52", change: "+1.24%", up: true },
  { symbol: "NVDA", name: "NVIDIA Corp.", price: "138.07", change: "+3.45%", up: true },
  { symbol: "TSLA", name: "Tesla, Inc.", price: "251.44", change: "-2.10%", up: false },
  { symbol: "AMZN", name: "Amazon.com, Inc.", price: "201.16", change: "+0.62%", up: true },
];

export function TickerWatchlist() {
  return (
    <div className="flex w-full max-w-[380px] flex-col gap-0.5">
      {HOLDINGS.map((h) => (
        <div
          key={h.symbol}
          className="flex cursor-pointer items-center gap-3 rounded-[10px] px-3 py-2.5 transition-colors duration-150 hover:bg-[#6363631f]"
        >
          <img
            src={`https://cdn.brandfetch.io/ticker/${h.symbol}/w/80/h/80/fallback/lettermark?c=${CLIENT_ID}`}
            alt={`${h.name} logo`}
            className="h-10 w-10 shrink-0 rounded-lg"
          />
          <div className="min-w-0 flex-1">
            <div className="text-[15px] font-semibold">{h.symbol}</div>
            <div className="truncate text-[13px] text-[#6b7280]">{h.name}</div>
          </div>
          <div className="shrink-0 text-right">
            <div className="text-[15px] font-semibold">${h.price}</div>
            <div className={`text-[13px] font-medium ${h.up ? "text-[#16a34a]" : "text-[#dc2626]"}`}>
              {h.change}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

export function TickerPortfolioCard() {
  return (
    <div className="w-full max-w-[280px] rounded-xl border border-[#63636333] bg-white p-5 dark:bg-[#1c1d1f]">
      <div className="flex items-center gap-3">
        <img
          src={`https://cdn.brandfetch.io/ticker/NVDA/w/88/h/88/fallback/lettermark?c=${CLIENT_ID}`}
          alt="NVIDIA logo"
          className="h-11 w-11 rounded-lg"
        />
        <div>
          <div className="font-bold">NVDA</div>
          <div className="text-[13px] text-[#6b7280]">NVIDIA Corp.</div>
        </div>
      </div>
      <div className="mt-4 text-2xl font-bold">$4,142.10</div>
      <div className="mt-1 text-sm font-medium text-[#16a34a]">▲ $103.50 (3.45%) today</div>
      <div className="mt-3 flex justify-between border-t border-[#63636326] pt-3 text-[13px] text-[#6b7280]">
        <span>30 shares</span>
        <span>Avg $130.24</span>
      </div>
    </div>
  );
}