extended-10

1<script setup lang="ts">
2import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
3import { LucideChartNoAxesColumn, LucideInfo } from "lucide-vue-next";
4</script>
5 
6<template>
7  <Card class="gap-4">
8    <CardHeader class="gap-4 px-4">
9      <div class="flex items-center gap-3">
10        <div class="flex size-7 items-center justify-center rounded-md border">
11          <LucideChartNoAxesColumn class="text-foreground size-4" />
12        </div>
13        <CardTitle class="text-lg/none">Financing overview</CardTitle>
14      </div>
15      <CardDescription class="text-sm/relaxed">
16        Preview of the financing options available to the user and the total amount of financing
17        available.
18      </CardDescription>
19    </CardHeader>
20    <CardContent class="grid grid-cols-2 gap-4 px-4">
21      <div class="flex flex-col gap-1">
22        <div class="text-muted-foreground flex items-center gap-2">
23          <p class="text-xs font-medium">Total amount</p>
24          <LucideInfo class="size-4" />
25        </div>
26        <p class="text-xl font-semibold tracking-tight tabular-nums">$100,000</p>
27      </div>
28      <div class="flex flex-col gap-1">
29        <div class="text-muted-foreground flex items-center gap-2">
30          <p class="text-xs font-medium">Total Customer</p>
31          <LucideInfo class="size-4" />
32        </div>
33        <p class="text-xl font-semibold tracking-tight tabular-nums">27,320</p>
34      </div>
35    </CardContent>
36  </Card>
37</template>