Market Stats Card

"use client";

type MarketStat = { label: string; value: string };

const marketStats: MarketStat[] = [
  { label: "Crypto Coins", value: "21,497" },
  { label: "Need change", value: "521" },
  { label: "Market Cap", value: "$930,075,295,338" },
  { label: "24h Volume", value: "$44,125,521,243.91" },
];

export default function MarketStatCard() {
  return (
    <div className="w-full max-w-lg">
      <div className="rounded-[10px] border border-[#e5e7eb] bg-white px-[18px] py-[15px] shadow-sm">
        <div className="space-y-[11px]">
          {marketStats.map((stat) => (
            <div
              className="flex items-center gap-3 text-[15.152px] leading-[22.728px]"
              key={stat.label}
            >
              <span className="w-[100px] text-[#6b7280]">
                {stat.label}
              </span>
              <span className="text-[#6b7280]">:</span>
              <span className="text-[17.046px] font-medium text-[#1d7afc]">
                {stat.value}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Build a market stats card that displays key cryptocurrency market statistics. Show a vertical list of label-value pairs with labels in gray, separated by colons, and values in blue. Include stats for total crypto coins, exchanges, market cap, and 24h trading volume.