Payout Threshold
Payout threshold settings with slider
Payout Threshold
Set the minimum balance required before a payout is triggered.
$2500.00
$50 (MIN)
$10,000 (MAX)
"use client"import * as React from "react"import { Button } from "@/components/ui/button"import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card"import { Field, FieldDescription, FieldGroup, FieldLabel,} from "@/components/ui/field"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"import { Slider } from "@/components/ui/slider"import { Textarea } from "@/components/ui/textarea"import { IconPlaceholder } from "@/components/icon-placeholder"export function PayoutThreshold() { const [amount, setAmount] = React.useState([2500]) return ( <Card> <CardHeader> <CardTitle>Payout Threshold</CardTitle> <CardDescription> Set the minimum balance required before a payout is triggered. </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="preferred-currency"> Preferred Currency </FieldLabel> <Select defaultValue="usd"> <SelectTrigger id="preferred-currency" className="w-full" > <SelectValue /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectItem value="usd"> USD — United States Dollar </SelectItem> <SelectItem value="eur"> EUR — Euro </SelectItem> <SelectItem value="gbp"> GBP — British Pound </SelectItem> <SelectItem value="jpy"> JPY — Japanese Yen </SelectItem> </SelectGroup> </SelectContent> </Select> </Field> <Field> <div className="flex items-baseline justify-between"> <FieldLabel htmlFor="min-payout"> Minimum Payout Amount </FieldLabel> <span className="text-2xl font-semibold tabular-nums"> ${amount[0].toFixed(2)} </span> </div> <Slider id="min-payout" value={amount} onValueChange={setAmount} min={50} max={10000} step={50} /> <div className="flex items-center justify-between"> <FieldDescription>$50 (MIN)</FieldDescription> <FieldDescription>$10,000 (MAX)</FieldDescription> </div> </Field> <Field> <FieldLabel htmlFor="payout-notes">Notes</FieldLabel> <Textarea id="payout-notes" placeholder="Add any notes for this payout configuration..." className="min-h-[100px]" /> </Field> </FieldGroup> </CardContent> <CardFooter> <Button className="w-full">Save Threshold</Button> </CardFooter> </Card> )}