131 lines
4.3 KiB
TypeScript
131 lines
4.3 KiB
TypeScript
import { Button } from "@/registry/bases/radix/ui/button"
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/bases/radix/ui/card"
|
|
import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
InputGroupText,
|
|
} from "@/registry/bases/radix/ui/input-group"
|
|
import { Item, ItemContent } from "@/registry/bases/radix/ui/item"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/registry/bases/radix/ui/select"
|
|
import { Separator } from "@/registry/bases/radix/ui/separator"
|
|
import { IconPlaceholder } from "@/app/(create)/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>
|
|
)
|
|
}
|