extended-15

1<script setup lang="ts">
2import { Card, CardContent } from "@/registry/default/ui/card";
3import {
4  LucideMoreHorizontal,
5  LucideRocket,
6  LucideUserPlus,
7  LucideVerified,
8} from "lucide-vue-next";
9</script>
10 
11<template>
12  <Card class="py-4">
13    <CardContent class="flex flex-col gap-3 px-4">
14      <div class="flex gap-3">
15        <div
16          class="bg-primary text-primary-foreground flex size-20 items-center justify-center rounded-md border-2"
17        >
18          <LucideRocket class="size-10" />
19        </div>
20        <div class="flex flex-1 flex-col gap-2">
21          <div class="flex items-center justify-between gap-2">
22            <div class="flex items-center gap-1">
23              <p class="text-base font-medium">SpaceX</p>
24              <LucideVerified class="size-4 shrink-0" />
25            </div>
26            <Badge variant="outline" class="text-[0.625rem] font-medium tracking-wide uppercase">
27              Aerospace
28            </Badge>
29          </div>
30          <span class="text-muted-foreground text-sm/none font-medium">Space Exploration</span>
31          <div class="text-muted-foreground text-sm/none">
32            <span class="font-semibold">12,000+</span>
33            Employees
34          </div>
35        </div>
36      </div>
37      <p class="text-muted-foreground text-sm/relaxed">
38        SpaceX is revolutionizing space technology with reusable rockets and ambitious missions to
39        make humanity a multi-planetary species.
40      </p>
41      <div class="flex flex-wrap gap-2">
42        <Badge variant="outline">#spacex</Badge>
43        <Badge variant="outline">#aerospace</Badge>
44        <Badge variant="outline">#technology</Badge>
45      </div>
46      <div class="flex gap-2">
47        <Button size="lg" class="w-full flex-1 rounded-full">
48          <LucideUserPlus class="size-4" />
49          <span>Follow</span>
50        </Button>
51        <Button variant="outline" class="size-10 rounded-full">
52          <LucideMoreHorizontal class="size-4" />
53        </Button>
54      </div>
55    </CardContent>
56  </Card>
57</template>