extended-30

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
4import { Progress } from "@/registry/default/ui/progress";
5 
6const used = 2000;
7const total = 5000;
8const remaining = total - used;
9const percent = (used / total) * 100;
10</script>
11 
12<template>
13  <div class="*:not-first:mt-2">
14    <Card class="mx-auto w-full max-w-lg">
15      <CardHeader class="flex min-h-auto items-center justify-between border-0">
16        <CardTitle>API Call Quota</CardTitle>
17        <div class="ml-auto">
18          <Button variant="outline" size="sm" class="font-medium">View API usage</Button>
19        </div>
20      </CardHeader>
21      <CardContent class="flex flex-col space-y-6">
22        <div class="grow space-y-2">
23          <div class="flex items-center justify-between">
24            <span class="text-muted-foreground text-sm">
25              Used calls:
26              <span class="text-foreground font-semibold">{{ used }}</span>
27            </span>
28            <span class="text-foreground text-base font-semibold">
29              ${{ (used * 0.002).toFixed(2) }}
30            </span>
31          </div>
32 
33          <div>
34            <Progress :modelValue="percent" class="bg-muted" indicatorClassName="bg-indigo-500" />
35          </div>
36 
37          <div class="flex items-center justify-between">
38            <span class="text-foreground text-sm font-semibold">
39              {{ remaining }} free calls left
40            </span>
41            <span class="text-muted-foreground text-xs">of {{ total }} monthly quota</span>
42          </div>
43        </div>
44 
45        <div
46          class="bg-muted/60 text-muted-foreground flex items-center justify-between gap-2 rounded-xl px-4 py-2.5 text-xs"
47        >
48          <span>Quota renews on</span>
49          <span class="text-foreground font-medium">September 1, 2025</span>
50        </div>
51      </CardContent>
52    </Card>
53    <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
54      Ported from reui.io API quota card
55      <a
56        class="hover:text-foreground underline"
57        href="https://reui.io/blocks/cards"
58        target="_blank"
59        rel="noopener nofollow"
60      >
61        reui.io
62      </a>
63    </p>
64  </div>
65</template>