extended-11

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import { Card, CardContent, CardTitle } from "@/registry/default/ui/card";
4import { LucideMoreHorizontal } from "lucide-vue-next";
5</script>
6 
7<template>
8  <Card class="relative overflow-hidden py-4">
9    <div class="absolute top-0 right-0 h-full w-full translate-x-14 -translate-y-14">
10      <div class="absolute top-[20%] right-[30%] size-24 rounded-full bg-sky-400/20 blur-2xl"></div>
11      <div
12        class="absolute top-[30%] left-[10%] size-24 rounded-full bg-fuchsia-400/20 blur-2xl"
13      ></div>
14      <div
15        class="absolute right-[30%] bottom-[20%] size-24 rounded-full bg-amber-400/20 blur-2xl"
16      ></div>
17    </div>
18    <CardContent class="relative flex flex-col gap-3 px-4">
19      <div class="flex items-center justify-between">
20        <CardTitle class="text-base font-medium">Earnings</CardTitle>
21        <div class="flex items-center gap-2">
22          <Button variant="ghost" class="size-8">
23            <LucideMoreHorizontal class="size-4" />
24          </Button>
25        </div>
26      </div>
27      <div class="col-span-2 flex flex-col gap-2">
28        <span class="text-3xl font-normal tracking-tighter tabular-nums">$18,120.53</span>
29        <div class="text-muted-foreground text-sm font-medium">
30          <span class="font-semibold text-green-600 dark:text-green-500">+12.5%</span>
31          <span>vs last month</span>
32        </div>
33      </div>
34      <div class="grid grid-cols-2 gap-2">
35        <div class="bg-muted flex flex-col gap-1 rounded-md p-3">
36          <span class="text-muted-foreground text-xs font-medium">Total orders</span>
37          <span class="text-2xl font-medium tracking-tighter tabular-nums">124</span>
38        </div>
39        <div class="bg-muted flex flex-col gap-1 rounded-md p-3">
40          <span class="text-muted-foreground text-xs font-medium">Total customers</span>
41          <span class="text-2xl font-medium tracking-tighter tabular-nums">42</span>
42        </div>
43      </div>
44    </CardContent>
45  </Card>
46</template>