UI logoUIUI Components

Empty Connect Bank

Empty state for connecting a bank account

Icon
Connect Bank
Link your payout method to receive monthly royalty distributions automatically.
import { Button } from "@/components/ui/button"import { Card, CardContent } from "@/components/ui/card"import {    Empty,    EmptyContent,    EmptyDescription,    EmptyHeader,    EmptyMedia,    EmptyTitle,} from "@/components/ui/empty"import { IconPlaceholder } from "@/components/icon-placeholder"export function EmptyConnectBank() {    return (        <Card>            <CardContent>                <Empty className="p-4">                    <EmptyMedia variant="icon">                        <IconPlaceholder                            lucide="CreditCardIcon"                            tabler="IconCreditCard"                            hugeicons="CreditCardIcon"                            phosphor="CreditCardIcon"                            remixicon="RiBankCardLine"                        />                    </EmptyMedia>                    <EmptyHeader>                        <EmptyTitle>Connect Bank</EmptyTitle>                        <EmptyDescription>                            Link your payout method to receive monthly royalty                            distributions automatically.                        </EmptyDescription>                    </EmptyHeader>                    <EmptyContent>                        <Button>Set Up Payouts</Button>                    </EmptyContent>                </Empty>            </CardContent>        </Card>    )}