billing-4

1import { RiArrowRightUpLine } from "@remixicon/react"
2 
3import { Badge } from "@/components/ui/badge"
4import { Button } from "@/components/ui/button"
5import {
6  Card,
7  CardContent,
8  CardFooter,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/card"
12import { Progress } from "@/components/ui/progress"
13import { Separator } from "@/components/ui/separator"
14 
15type Meter = {
16  label: string
17  used: number
18  limit: number
19  unit: string
20  display: string
21}
22 
23const meters: Meter[] = [
24  { label: "Seats", used: 9, limit: 10, unit: "seats", display: "9 / 10" },
25  {
26    label: "Storage",
27    used: 42,
28    limit: 50,
29    unit: "GB",
30    display: "42 / 50 GB",
31  },
32  {
33    label: "API Requests",
34    used: 1.24,
35    limit: 2,
36    unit: "M",
37    display: "1.24M / 2M",
38  },
39  {
40    label: "Bandwidth",
41    used: 96,
42    limit: 250,
43    unit: "GB",
44    display: "96 / 250 GB",
45  },
46]
47 
48function MeterRow({ meter }: { meter: Meter }) {
49  const percent = Math.round((meter.used / meter.limit) * 100)
50  const nearLimit = percent >= 85
51  return (
52    <div className="flex flex-col gap-2">
53      <div className="flex items-baseline justify-between gap-2">
54        <span className="text-sm font-medium">{meter.label}</span>
55        <span
56          className={
57            "text-xs tabular-nums " +
58            (nearLimit
59              ? "text-amber-700 dark:text-amber-400"
60              : "text-muted-foreground")
61          }
62        >
63          {meter.display}
64        </span>
65      </div>
66      <Progress value={percent} />
67    </div>
68  )
69}
70 
71export default function BillingBlock() {
72  return (
73    <section className="flex min-h-svh w-full items-center justify-center bg-background px-6 py-16 text-foreground">
74      <Card className="w-full max-w-lg">
75        <CardHeader className="flex-row items-start justify-between gap-3">
76          <div>
77            <CardTitle className="text-base">Usage This Cycle</CardTitle>
78            <p className="mt-1 text-xs text-muted-foreground">
79              Team plan, resets Aug 1, 2026
80            </p>
81          </div>
82          <Badge variant="secondary">18 Days Left</Badge>
83        </CardHeader>
84        <CardContent className="flex flex-col gap-5">
85          {meters.map((meter) => (
86            <MeterRow key={meter.label} meter={meter} />
87          ))}
88          <Separator />
89          <div className="flex items-center justify-between">
90            <div>
91              <p className="text-sm font-medium">Estimated total</p>
92// … truncated