Currency Converter Card

1"use client";
2 
3import { motion } from "framer-motion";
4import { ArrowLeftRight, TrendingUp } from "lucide-react";
5import { useEffect, useMemo, useState } from "react";
6 
7type Currency = {
8  code: string;
9  name: string;
10  symbol: string;
11};
12 
13type CurrencyCode = (typeof CURRENCIES)[number]["code"];
14 
15const CURRENCIES: Currency[] = [
16  { code: "USD", name: "US Dollar", symbol: "$" },
17  { code: "EUR", name: "Euro", symbol: "€" },
18  { code: "GBP", name: "British Pound", symbol: "£" },
19  { code: "JPY", name: "Japanese Yen", symbol: "¥" },
20  { code: "AUD", name: "Australian Dollar", symbol: "A$" },
21  { code: "CAD", name: "Canadian Dollar", symbol: "C$" },
22  { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
23  { code: "CNY", name: "Chinese Yuan", symbol: "¥" },
24  { code: "INR", name: "Indian Rupee", symbol: "₹" },
25  { code: "MXN", name: "Mexican Peso", symbol: "$" },
26];
27 
28const BASE_INDEX: Record<CurrencyCode, number> = {
29  USD: 1,
30  EUR: 0.92,
31  GBP: 0.78,
32  JPY: 147.42,
33  AUD: 1.5,
34  CAD: 1.36,
35  CHF: 0.88,
36  CNY: 7.11,
37  INR: 83.24,
38  MXN: 17.12,
39};
40 
41export function CurrencyConverterCard() {
42  const [amount, setAmount] = useState<string>("100");
43  const [fromCurrency, setFromCurrency] = useState<CurrencyCode>("USD");
44  const [toCurrency, setToCurrency] = useState<CurrencyCode>("EUR");
45  const [result, setResult] = useState<number | null>(null);
46  const [rate, setRate] = useState<number | null>(null);
47  const [loading, setLoading] = useState(false);
48  const [isFlipped, setIsFlipped] = useState(false);
49  const [error, setError] = useState<string>("");
50 
51  useEffect(() => {
52    const trimmed = amount.trim();
53 
54    if (!trimmed) {
55      setLoading(false);
56      setError("");
57      setRate(null);
58      setResult(null);
59      return;
60    }
61 
62    const numericAmount = Number(trimmed);
63 
64    if (Number.isNaN(numericAmount)) {
65      setLoading(false);
66      setError("Enter a valid amount");
67      setRate(null);
68      setResult(null);
69      return;
70    }
71 
72    let cancelled = false;
73 
74    setLoading(true);
75    setError("");
76 
77    const timeout = window.setTimeout(() => {
78      if (cancelled) return;
79 
80      const fromIndex = BASE_INDEX[fromCurrency];
81      const toIndex = BASE_INDEX[toCurrency];
82 
83      if (!fromIndex || !toIndex) {
84        setError("Unsupported currency selection");
85        setLoading(false);
86        return;
87      }
88 
89      const nextRate = toIndex / fromIndex;
90 
91      setRate(nextRate);
92      setResult(numericAmount * nextRate);
93// … truncated