Components
Loading preview...
Currency Exchange Card This component provides a complete interface for currency conversion, including selectors, amount input, fee calculations, and a swap animation. It's built to be highly reusable by accepting currency data and exchange logic via props.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/currency-exchange-cardimport { CurrencyExchangeCard, Currency } from "@/components/ui/currency-exchange-card";
// --- DEMO DATA ---
const sampleCurrencies: Currency[] = [
{
code: "USD",
name: "US Dollar",
flag: "https://flagcdn.com/us.svg",
},
{
code: "EUR",
name: "Euro",
flag: "https://flagcdn.com/eu.svg",
},
{
code: "GBP",
name: "British Pound",
flag: "https://flagcdn.com/gb.svg",
},
{
code: "JPY",
name: "Japanese Yen",
flag: "https://flagcdn.com/jp.svg",
},
];
const CurrencyExchangeDemo = () => {
// --- DEMO HANDLER ---
const handleExchange = (data: { from: Currency; to: Currency; amount: number; total: number }) => {
alert(
`Exchanged ${data.amount} ${data.from.code} to ${data.total.toFixed(2)} ${data.to.code}`
);
};
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<CurrencyExchangeCard
currencies={sampleCurrencies}
initialFromCurrency={sampleCurrencies[0]} // USD
initialToCurrency={sampleCurrencies[1]} // EUR
availableBalance={16058.94}
exchangeRate={0.94} // 1 USD = 0.94 EUR
taxRate={0.02} // 2%
feeRate={0.01} // 1%
onExchange={handleExchange}
/>
</div>
);
};
export default CurrencyExchangeDemo;