Components
Loading preview...
swap-card This file contains the reusable SwapCard component. It uses framer-motion for the layout animations, lucide-react for icons, and is styled with shadcn/ui principles.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/swap-card// demo.tsx
import { SwapCard, type Token } from "@/components/ui/swap-card";
import { Coins, PiggyBank } from "lucide-react"; // Example icons
// Define the tokens with their data and icons
const tokens: Token[] = [
{
symbol: "ETH",
name: "Ethereum",
icon: Coins,
},
{
symbol: "AAVE",
name: "Aave",
icon: PiggyBank,
},
];
export default function SwapCardDemo() {
const handleSwap = (data: { sellAmount: string; buyAmount: string; sellToken: Token; buyToken: Token }) => {
console.log("Swap Initiated:", {
from: `${data.sellAmount} ${data.sellToken.symbol}`,
to: `${data.buyAmount} ${data.buyToken.symbol}`,
});
// Add your swap logic here (e.g., API call)
};
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<SwapCard
tokens={tokens}
initialSellToken={tokens[0]} // ETH
initialBuyToken={tokens[1]} // AAVE
onSwap={handleSwap}
/>
</div>
);
}