Transfer Funds
Transfer funds between accounts
Transfer Funds
Move money between your connected accounts.
Estimated arrivalToday, Apr 14
Transaction fee$0.00
Total amount$1,200.00
import { Button } from "@/components/ui/button"import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card"import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText,} from "@/components/ui/input-group"import { Item, ItemContent } from "@/components/ui/item"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"import { Separator } from "@/components/ui/separator"import { IconPlaceholder } from "@/components/icon-placeholder"export function TransferFunds() { return ( <Card> <CardHeader> <CardTitle>Transfer Funds</CardTitle> <CardDescription> Move money between your connected accounts. </CardDescription> <CardAction> <Button variant="ghost" size="icon-sm" className="bg-muted"> <IconPlaceholder lucide="XIcon" tabler="IconX" hugeicons="Cancel01Icon" phosphor="XIcon" remixicon="RiCloseLine" /> </Button> </CardAction> </CardHeader> <CardContent> <FieldGroup> <Field> <FieldLabel htmlFor="transfer-amount"> Amount to Transfer </FieldLabel> <InputGroup> <InputGroupAddon> <InputGroupText>$</InputGroupText> </InputGroupAddon> <InputGroupInput id="transfer-amount" defaultValue="1,200.00" /> </InputGroup> </Field> <Field> <FieldLabel htmlFor="from-account"> From Account </FieldLabel> <Select defaultValue="checking"> <SelectTrigger id="from-account" className="w-full"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectItem value="checking"> Main Checking (··8402) — $12,450.00 </SelectItem> <SelectItem value="business"> Business (··7731) — $8,920.00 </SelectItem> </SelectGroup> </SelectContent> </Select> </Field> <Field> <FieldLabel htmlFor="to-account">To Account</FieldLabel> <Select defaultValue="savings"> <SelectTrigger id="to-account" className="w-full"> <SelectValue /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectItem value="savings"> High Yield Savings (··1192) — $42,100.00 </SelectItem> <SelectItem value="investment"> Investment (··3349) — $18,200.00 </SelectItem> </SelectGroup> </SelectContent> </Select> </Field> <Item variant="muted" className="flex-col items-stretch"> <ItemContent className="gap-3"> <div className="flex items-center justify-between"> <span className="text-sm text-muted-foreground"> Estimated arrival </span> <span className="text-sm font-medium"> Today, Apr 14 </span> </div> <Separator /> <div className="flex items-center justify-between"> <span className="text-sm text-muted-foreground"> Transaction fee </span> <span className="text-sm font-medium tabular-nums"> $0.00 </span> </div> <Separator /> <div className="flex items-center justify-between"> <span className="text-sm font-medium"> Total amount </span> <span className="text-sm font-semibold tabular-nums"> $1,200.00 </span> </div> </ItemContent> </Item> </FieldGroup> </CardContent> <CardFooter> <Button className="w-full">Confirm Transfer</Button> </CardFooter> </Card> )}