Initial commit

app/pages/home/PricingTable.tsx

@@ -0,0 +1,87 @@
+import clsx from "clsx";
+import { Link } from "react-router";
+import type {
+  CryptocurrenciesListResponse,
+  SimpleCryptoCurrency
+} from "~/types/crypto-api";
+import { formatPercentage } from "~/utils/format";
+
+function PricingRow({
+  currency,
+  index
+}: {
+  currency: SimpleCryptoCurrency;
+  index: number;
+}) {
+  return (
+    <tr className="hover:bg-slate-50">
+      <td className="px-5 py-4 text-slate-500 hidden md:table-cell">
+        {index + 1}
+      </td>
+      <td className="px-5 py-4 flex items-center gap-3">
+        <Link className="flex flex-row gap-3" to={`/crypto/${currency.id}`}>
+          <img
+            className="h-8 w-8 rounded-full"
+            src={currency.logo}
+            alt={`${currency.name} Logo`}
+          />
+          <div>
+            <p className="font-medium">{currency.name}</p>
+            <p className="text-xs text-slate-500">{currency.symbol}</p>
+          </div>
+        </Link>
+      </td>
+      <td className="px-5 py-4 font-medium">
+        ${currency.price.toLocaleString()}
+      </td>
+      <td className="px-5 py-4 hidden md:table-cell">
+        ${(currency.market_cap / 1_000_000_000).toFixed(1)}B
+      </td>
+      <td className="px-5 py-4 hidden md:table-cell">
+        ${(currency.volume_24h / 1_000_000_000).toFixed(1)}B
+      </td>
+      <td className="px-5 py-4">
+        <span
+          className={clsx(
+            "rounded-full px-2 py-1 text-xs font-medium",
+            currency.percent_change_24h > 0
+              ? "bg-emerald-100 text-emerald-700"
+              : "bg-rose-100 text-rose-700"
+          )}
+        >
+          {formatPercentage(currency.percent_change_24h)}
+        </span>
+      </td>
+    </tr>
+  );
+}
+
+export function PricingTable({
+  currencies
+}: {
+  currencies: CryptocurrenciesListResponse["currencies"];
+}) {
+  return (
+    <section className="mt-8 rounded-2xl border border-slate-200 bg-white shadow-sm">
+      <div className="overflow-x-auto">
+        <table className="min-w-full text-left text-sm">
+          <thead className="bg-slate-100 text-xs uppercase tracking-wider text-slate-600">
+            <tr>
+              <th className="px-5 py-3 hidden md:table-cell">#</th>
+              <th className="px-5 py-3">Asset</th>
+              <th className="px-5 py-3">Price</th>
+              <th className="px-5 py-3 hidden md:table-cell">Market cap</th>
+              <th className="px-5 py-3 hidden md:table-cell">Volume (24h)</th>
+              <th className="px-5 py-3">Change (24h)</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100">
+            {currencies.map((currency, index) => (
+              <PricingRow key={currency.id} currency={currency} index={index} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}