BillingList() — ui Function Reference

Architecture documentation for the BillingList() function in vercel.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ BillingList() — ui Function Reference

Dependency Diagram

graph TD
  5a163233_e564_7527_51fc_27cba146ba5e["BillingList()"]
  57afcab1_fc30_7f69_ecf5_50ea8da6ba44["vercel.tsx"]
  5a163233_e564_7527_51fc_27cba146ba5e -->|defined in| 57afcab1_fc30_7f69_ecf5_50ea8da6ba44
  style 5a163233_e564_7527_51fc_27cba146ba5e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/vercel.tsx lines 438–514

function BillingList() {
  return (
    <Example
      title="Billing"
      className="items-center lg:p-16"
      containerClassName="col-span-full"
    >
      <ItemGroup className="max-w-7xl gap-0 rounded-lg border">
        {billingItems.map((item, index) => (
          <React.Fragment key={item.month}>
            <Item className="grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]">
              <ItemContent>
                <ItemTitle>
                  {item.month}
                  <Badge
                    variant="secondary"
                    className="bg-green-100 text-green-700 hover:bg-green-100"
                  >
                    {item.status}
                  </Badge>
                </ItemTitle>
                <ItemDescription>
                  Infrastructure usage & Vercel platform
                </ItemDescription>
              </ItemContent>
              <ItemContent className="hidden lg:flex">
                <ItemTitle>Total Due</ItemTitle>
                <ItemDescription>{item.amount}</ItemDescription>
              </ItemContent>
              <ItemContent className="hidden lg:flex">
                <ItemDescription>
                  Invoiced {format(item.invoiceDate, "d MMM yyyy")}
                </ItemDescription>
              </ItemContent>
              <ItemActions>
                <DropdownMenu>
                  <DropdownMenuTrigger
                    render={<Button variant="ghost" size="icon" />}
                  >
                    <IconPlaceholder
                      lucide="MoreHorizontalIcon"
                      tabler="IconDots"
                      hugeicons="MoreHorizontalCircle01Icon"
                      phosphor="DotsThreeOutlineIcon"
                      remixicon="RiMoreLine"
                    />
                    <span className="sr-only">More options</span>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem>View invoice</DropdownMenuItem>
                    <DropdownMenuItem>Download PDF</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>Contact support</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </ItemActions>
              <ItemFooter className="col-span-full w-full border-t pt-4 lg:hidden">
                <ItemContent>
                  <ItemTitle>Total Due</ItemTitle>
                  <ItemDescription>{item.amount}</ItemDescription>
                </ItemContent>
                <ItemContent>
                  <ItemDescription>
                    Invoiced {format(item.invoiceDate, "d MMM yyyy")}
                  </ItemDescription>
                </ItemContent>
              </ItemFooter>
            </Item>
            {index !== billingItems.length - 1 && (
              <ItemSeparator className="my-0" />
            )}
          </React.Fragment>
        ))}
      </ItemGroup>
    </Example>
  )
}