Send Money

Renders a form for sending money with options for bank, card, or wallet. It shows confirmation, status, and feedback states. It uses animations and icons for visual feedback.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/send-money

npx layro-cli add @watermeloncorp/send-money

npx layro-cli add @watermeloncorp/send-money

bunx layro-cli add @watermeloncorp/send-money

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Building2, CreditCard, Wallet, X } from 'lucide-react';
import { MdOutlineAddCard } from 'react-icons/md';

export type PaymentType = 'bank' | 'card' | 'wallet' | null;

export interface Card {
  id: string;
  last4: string;
  brand: 'visa' | 'mastercard' | 'other';
}