1 files changed, 26 insertions, 0 deletions

diff --git a/app/components/bitcoin-price.tsx b/app/components/bitcoin-price.tsx
new file mode 100644
index 0000000..af837d9
--- /dev/null
+++ b/app/components/bitcoin-price.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { BitcoinPrice as btcPrice } from "../utils/bitcoin-price";
+
+export const BitcoinPrice = () => {
+  const [isLoading, setLoading] = useState(false);
+  const bitcoinPrice = btcPrice();
+
+  const formatCurrency = (val: string) => {
+    const n = parseFloat(val);
+    const formatter = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    });
+
+    return formatter.format(n);
+  };
+
+  useEffect(() => setLoading(!bitcoinPrice), [bitcoinPrice]);
+
+  if (isLoading || !bitcoinPrice) return <p>Loading...</p>;
+
+  return <div>Bitcoin price: {formatCurrency(bitcoinPrice)}</div>;
+};