BillingList() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ BillingList() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/vercel.tsx lines 437–513

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 asChild>
                    <Button variant="ghost" size="icon">
                      <IconPlaceholder
                        lucide="MoreHorizontalIcon"
                        tabler="IconDots"
                        hugeicons="MoreHorizontalCircle01Icon"
                        phosphor="DotsThreeOutlineIcon"
                        remixicon="RiMoreLine"
                      />
                      <span className="sr-only">More options</span>
                    </Button>
                  </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>
  )
}