diff options
| author | bndw <ben@bdw.to> | 2023-04-26 17:49:25 -0700 |
|---|---|---|
| committer | bndw <ben@bdw.to> | 2023-04-26 17:49:25 -0700 |
| commit | 8686078ae801fdc15df5a40ee158a43373d37c1c (patch) | |
| tree | f8807fa764e917c6c4cdd30dcff31aa4bb060da8 /app/components/bitcoin-price.tsx | |
Initial commit
Diffstat (limited to 'app/components/bitcoin-price.tsx')
| -rw-r--r-- | app/components/bitcoin-price.tsx | 26 |
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 @@ | |||
| 1 | "use client"; | ||
| 2 | |||
| 3 | import { useEffect, useState } from "react"; | ||
| 4 | import { BitcoinPrice as btcPrice } from "../utils/bitcoin-price"; | ||
| 5 | |||
| 6 | export const BitcoinPrice = () => { | ||
| 7 | const [isLoading, setLoading] = useState(false); | ||
| 8 | const bitcoinPrice = btcPrice(); | ||
| 9 | |||
| 10 | const formatCurrency = (val: string) => { | ||
| 11 | const n = parseFloat(val); | ||
| 12 | const formatter = new Intl.NumberFormat("en-US", { | ||
| 13 | style: "currency", | ||
| 14 | currency: "USD", | ||
| 15 | maximumFractionDigits: 0, | ||
| 16 | }); | ||
| 17 | |||
| 18 | return formatter.format(n); | ||
| 19 | }; | ||
| 20 | |||
| 21 | useEffect(() => setLoading(!bitcoinPrice), [bitcoinPrice]); | ||
| 22 | |||
| 23 | if (isLoading || !bitcoinPrice) return <p>Loading...</p>; | ||
| 24 | |||
| 25 | return <div>Bitcoin price: {formatCurrency(bitcoinPrice)}</div>; | ||
| 26 | }; | ||
