[V0_FILE]typescriptreact:file="currency-converter.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" import { ScrollArea } from "@/components/ui/scroll-area" import { ArrowUpDown, ChevronRight, Search } from "lucide-react" const fiatCurrencies = [ { code: "USD", name: "US Dollar", flag: "🇺🇸" }, { code: "EUR", name: "Euro", flag: "🇪🇺" }, { code: "GBP", name: "British Pound", flag: "🇬🇧" }, { code: "JPY", name: "Japanese Yen", flag: "🇯🇵" }, { code: "AUD", name: "Australian Dollar", flag: "🇦🇺" }, { code: "CAD", name: "Canadian Dollar", flag: "🇨🇦" }, { code: "CHF", name: "Swiss Franc", flag: "🇨🇭" }, { code: "CNY", name: "Chinese Yuan", flag: "🇨🇳" }, { code: "INR", name: "Indian Rupee", flag: "🇮🇳" }, { code: "SGD", name: "Singapore Dollar", flag: "🇸🇬" }, { code: "NZD", name: "New Zealand Dollar", flag: "🇳🇿" }, { code: "MXN", name: "Mexican Peso", flag: "🇲🇽" }, { code: "BRL", name: "Brazilian Real", flag: "🇧🇷" }, { code: "SEK", name: "Swedish Krona", flag: "🇸🇪" }, { code: "NOK", name: "Norwegian Krone", flag: "🇳🇴" }, ] const cryptoCurrencies = [ { code: "BTC", name: "Bitcoin", icon: "₿" }, { code: "ETH", name: "Ethereum", icon: "Ξ" }, { code: "USDT", name: "Tether", icon: "₮" }, { code: "BNB", name: "Binance Coin", icon: "BNB" }, { code: "XRP", name: "Ripple", icon: "XRP" }, { code: "ADA", name: "Cardano", icon: "ADA" }, { code: "SOL", name: "Solana", icon: "SOL" }, { code: "DOT", name: "Polkadot", icon: "DOT" }, { code: "DOGE", name: "Dogecoin", icon: "Ð" }, { code: "AVAX", name: "Avalanche", icon: "AVAX" }, ] export default function CurrencyConverter() { const [amount, setAmount] = useState(1) const [fromCurrency, setFromCurrency] = useState("USD") const [toCurrency, setToCurrency] = useState("EUR") const [convertedAmount, setConvertedAmount] = useState(null) const [exchangeRate, setExchangeRate] = useState(null) const [isCrypto, setIsCrypto] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) useEffect(() => { const fetchExchangeRate = async () => { setIsLoading(true) setError(null) try { const response = await fetch( `https://free.currconv.com/api/v7/convert?apiKey=YOUR_API_KEY&q=${fromCurrency}_${toCurrency}&compact=ultra`, ) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const data = await response.json() const rate = data[`${fromCurrency}_${toCurrency}`] if (!rate) { throw new Error("Exchange rate not found in response") } setExchangeRate(rate) setConvertedAmount(amount * rate) } catch (error) { console.error("Error fetching exchange rate:", error) setError("Failed to fetch exchange rate. Using fallback rate.") // Fallback to a static exchange rate const fallbackRate = 1.1 // Example fallback rate setExchangeRate(fallbackRate) setConvertedAmount(amount * fallbackRate) } finally { setIsLoading(false) } } fetchExchangeRate() }, [amount, fromCurrency, toCurrency]) const handleSwapCurrencies = () => { setFromCurrency(toCurrency) setToCurrency(fromCurrency) } return (

Currency Converter

Convert

{ const value = Number.parseFloat(e.target.value) if (!isNaN(value)) { setAmount(Math.max(0, Math.min(1000000, value))) } }} onWheel={(e) => { e.preventDefault() const delta = e.deltaY > 0 ? -1 : 1 setAmount((prevAmount) => { const newAmount = prevAmount + delta return Math.max(0, Math.min(1000000, newAmount)) }) }} step="1" min="0" max="1000000" className="w-full text-5xl font-light bg-transparent border-none text-center focus:ring-0 focus:outline-none text-white placeholder-gray-400" placeholder="0" />

{isLoading ? (

) : ( <> {error &&

{error}

}

{convertedAmount !== null ? convertedAmount.toFixed(isCrypto ? 8 : 2) : "..."} {toCurrency}

1 {fromCurrency} = {exchangeRate !== null ? exchangeRate.toFixed(isCrypto ? 8 : 4) : "..."}{" "} {toCurrency}

)}

) } function CurrencySelect({ value, onChange, label, isCrypto }) { const [open, setOpen] = useState(false) const [search, setSearch] = useState("") const currencies = isCrypto ? cryptoCurrencies : fiatCurrencies const filteredCurrencies = currencies.filter( (currency) => currency.code.toLowerCase().includes(search.toLowerCase()) || currency.name.toLowerCase().includes(search.toLowerCase()), ) return ( ) }

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This