extended-14

1<script setup lang="ts">
2import { Badge } from "@/registry/default/ui/badge";
3import { Button } from "@/registry/default/ui/button";
4import { Card, CardContent, CardHeader } from "@/registry/default/ui/card";
5import { LucideArrowRight, LucideBookmark, LucideBriefcase } from "lucide-vue-next";
6</script>
7 
8<template>
9  <Card class="rounded-2xl py-4">
10    <CardHeader class="flex flex-row items-center justify-between px-4">
11      <div class="bg-muted flex size-8 items-center justify-center gap-2 rounded-md">
12        <LucideBriefcase class="h-4 w-4" />
13      </div>
14      <Button size="sm" variant="secondary">
15        <span class="text-sm font-medium">Save</span>
16        <LucideBookmark class="h-4 w-4" />
17      </Button>
18    </CardHeader>
19    <CardContent class="flex flex-col gap-4 px-4">
20      <div class="flex flex-col gap-3 border-b border-dashed pb-4">
21        <div class="flex items-baseline gap-2">
22          <span class="text-base font-medium">Dribbble</span>
23          <time class="text-muted-foreground text-xs font-medium">12 days ago</time>
24        </div>
25 
26        <h3 class="text-2xl/none font-semibold">Full Stack Developer</h3>
27 
28        <div class="flex items-center gap-2">
29          <Badge variant="secondary">Contract</Badge>
30          <Badge variant="secondary">Remote</Badge>
31          <Badge variant="secondary">Full Time</Badge>
32        </div>
33      </div>
34 
35      <div class="flex items-center justify-between gap-2">
36        <div class="flex flex-col">
37          <span class="text-base/none font-semibold">$160k/year</span>
38          <p class="text-muted-foreground text-sm font-medium">San Francisco, CA</p>
39        </div>
40        <Button>
41          <span class="text-sm font-medium">Apply</span>
42          <LucideArrowRight class="h-4 w-4" />
43        </Button>
44      </div>
45    </CardContent>
46  </Card>
47</template>