Initial commit

app/pages/crypto-details/DescriptionSection.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
+import { formatPercentage } from "~/utils/format";
+
+export function DescriptionSection({
+  currency
+}: {
+  currency: CryptocurrencyDetailsResponse["currency"];
+}) {
+  return (
+    <section className="mb-8 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="max-w-3xl">
+          <h2 className="text-base font-semibold text-slate-900">
+            {currency.name} ({currency.symbol})
+          </h2>
+          <p className="mt-2 text-sm leading-6 text-slate-600">
+            {currency.description}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-2 sm:items-end pt-3 md:pt-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-slate-500">Price</span>
+            <span className="text-2xl font-semibold tracking-tight sm:text-3xl">
+              ${currency.price.toLocaleString()}
+            </span>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <span
+              className={clsx(
+                "inline-flex items-center rounded-full px-3 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>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}