// title: Subscriptions table with plan badges and billing info import { SettingsIcon } from "lucide-react"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/registry/default/ui/table"; const subscriptions = [ { billing: "$20/mo", nextBilling: "Mar 1, 2025", plan: "Pro", planVariant: "default" as const, service: "Vercel Pro", status: "Active", statusVariant: "success" as const, }, { billing: "$21/user/mo", nextBilling: "Mar 15, 2025", plan: "Enterprise", planVariant: "info" as const, service: "GitHub Enterprise", status: "Active", statusVariant: "success" as const, }, { billing: "$45/editor/mo", nextBilling: "Apr 1, 2025", plan: "Organization", planVariant: "warning" as const, service: "Figma Organization", status: "Active", statusVariant: "success" as const, }, { billing: "$12.50/user/mo", nextBilling: "—", plan: "Business+", planVariant: "secondary" as const, service: "Slack Business+", status: "Cancelled", statusVariant: "destructive" as const, }, { billing: "$8/user/mo", nextBilling: "Mar 20, 2025", plan: "Standard", planVariant: "outline" as const, service: "Linear Standard", status: "Trial", statusVariant: "info" as const, }, ]; export function Pattern() { return (

Service Plan Billing Status Actions {subscriptions.map((sub) => (

{sub.service} Next: {sub.nextBilling}

{sub.plan} {sub.billing} {sub.status} ))}

); }