extended-12

1<script setup lang="ts">
2import { Card, CardContent } from "@/registry/default/ui/card";
3import { Separator } from "@/registry/default/ui/separator";
4</script>
5 
6<template>
7  <Card class="gap-4 overflow-hidden pt-0">
8    <div class="overflow-y-auto">
9      <div class="h-28">
10        <img
11          class="h-full w-full object-cover"
12          src="/profile-bg.jpg"
13          alt="User profile background"
14          width="512"
15          height="96"
16        />
17      </div>
18      <div class="-mt-10 flex flex-col items-center justify-center gap-2">
19        <div
20          class="border-background bg-muted relative flex size-20 items-center justify-center overflow-hidden rounded-full border-4 shadow-xs shadow-black/10"
21        >
22          <img
23            src="/avatar-72-01.jpg"
24            class="h-full w-full object-cover"
25            width="80"
26            height="80"
27            alt="Profile image"
28          />
29        </div>
30        <div class="flex flex-col items-center justify-center gap-1 text-center">
31          <h1 class="text-lg/none font-bold">Jane Doe</h1>
32          <p class="text-muted-foreground text-sm font-medium">Full Stack Developer</p>
33        </div>
34      </div>
35    </div>
36    <CardContent class="flex flex-col px-6">
37      <div class="flex justify-between gap-2">
38        <div class="flex flex-col items-center gap-1 text-center">
39          <p class="text-muted-foreground text-xs font-medium">Followers</p>
40          <p class="text-xl font-medium tracking-tighter tabular-nums">124K</p>
41        </div>
42        <Separator orientation="vertical" class="data-[orientation=vertical]:h-12" />
43        <div class="flex flex-col items-center gap-1 text-center">
44          <p class="text-muted-foreground text-xs font-medium">Following</p>
45          <p class="text-xl font-medium tracking-tighter tabular-nums">412</p>
46        </div>
47        <Separator orientation="vertical" class="data-[orientation=vertical]:h-12" />
48        <div class="flex flex-col items-center gap-1 text-center">
49          <p class="text-muted-foreground text-xs font-medium">Posts</p>
50          <p class="text-xl font-medium tracking-tighter tabular-nums">124</p>
51        </div>
52      </div>
53    </CardContent>
54  </Card>
55</template>