extended-26

1<script setup lang="ts">
2import { cn } from "@/lib/utils";
3import { Button } from "@/registry/default/ui/button";
4import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
5import { LucideBanknoteArrowUp } from "lucide-vue-next";
6 
7const balanceData = {
8  balance: 10976.95,
9  delta: 5.7,
10  currencies: [
11    { code: "USD", percent: 30, color: "bg-white" },
12    { code: "GBP", percent: 20, color: "bg-indigo-400" },
13    { code: "EUR", percent: 15, color: "bg-blue-500" },
14    { code: "JPY", percent: 20, color: "bg-violet-600" },
15    { code: "CNY", percent: 15, color: "bg-fuchsia-600" },
16  ],
17};
18</script>
19 
20<template>
21  <div class="*:not-first:mt-2">
22    <Card class="mx-auto w-full max-w-xl rounded-2xl border-0 bg-zinc-900 text-white shadow-xl">
23      <CardHeader class="flex items-center justify-between">
24        <CardTitle class="text-lg font-semibold text-zinc-400">Balance</CardTitle>
25        <div class="ml-auto">
26          <Button
27            class="border-zinc-800 bg-zinc-800 text-zinc-100 hover:bg-zinc-700 hover:text-zinc-100"
28          >
29            <LucideBanknoteArrowUp />
30            Topup
31          </Button>
32        </div>
33      </CardHeader>
34      <CardContent>
35        <div class="mb-5 flex items-end gap-2">
36          <span class="text-3xl font-bold tracking-tight text-white">
37            ${{ balanceData.balance.toLocaleString() }}
38          </span>
39          <span class="ms-2 text-base font-semibold text-green-400">+{{ balanceData.delta }}%</span>
40        </div>
41 
42        <div class="mb-6 border-b border-zinc-700"></div>
43 
44        <!-- Segmented Progress Bar -->
45        <div class="mb-3 flex w-full items-center gap-1.5">
46          <div
47            v-for="cur in balanceData.currencies"
48            :key="cur.code"
49            class="space-y-2.5"
50            :style="{
51              width: `${cur.percent}%`,
52            }"
53          >
54            <div
55              :class="cn(cur.color, 'h-2.5 w-full overflow-hidden rounded-sm transition-all')"
56            ></div>
57 
58            <div class="flex flex-1 flex-col items-start">
59              <span class="text-xs font-medium text-zinc-400">
60                {{ cur.code }}
61              </span>
62              <span class="text-base font-semibold text-white">{{ cur.percent }}%</span>
63            </div>
64          </div>
65        </div>
66      </CardContent>
67    </Card>
68    <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
69      Ported from reui.io balance card
70// … truncated