Claimable Balance
Claimable balance card with pending status
Claimable Balance
$0.00
Pending SetupNet Royalties$0.00
Processing Fee-$0.00
Total Ready to Claim$0.00 USD
Once your bank is connected, balances over $10.00 are automatically eligible for monthly distribution on the 15th of each month.
import { Badge } from "@/components/ui/badge"import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card"import { Item, ItemContent } from "@/components/ui/item"import { Separator } from "@/components/ui/separator"export function ClaimableBalance() { return ( <Card> <CardHeader> <CardDescription>Claimable Balance</CardDescription> <CardTitle className="text-5xl tabular-nums">$0.00</CardTitle> <Badge variant="outline"> <span className="size-2 rounded-full bg-yellow-500" /> Pending Setup </Badge> </CardHeader> <CardContent className="flex flex-1 flex-col justify-end"> <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"> Net Royalties </span> <span className="text-sm font-medium tabular-nums"> $0.00 </span> </div> <div className="flex items-center justify-between"> <span className="text-sm text-muted-foreground"> Processing 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 text-muted-foreground"> Total Ready to Claim </span> <span className="text-sm font-semibold tabular-nums"> $0.00 USD </span> </div> </ItemContent> </Item> </CardContent> <CardFooter> <CardDescription> Once your bank is connected, balances over $10.00 are automatically eligible for monthly distribution on the 15th of each month. </CardDescription> </CardFooter> </Card> )}