Table in card with status badges.

<script setup lang="ts">
import { Card, CardContent } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const tasks = [
  { id: "1", name: "Design homepage", status: "Completed", statusColor: "bg-green-500/10 text-green-700" },
  { id: "2", name: "Implement API", status: "In Progress", statusColor: "bg-yellow-500/10 text-yellow-700" },
  { id: "3", name: "Write tests", status: "Pending", statusColor: "bg-gray-500/10 text-gray-700" },
]
</script>

<template>
  <div class="mx-auto flex w-full max-w-lg flex-col">
    <Card class="p-0">
      <CardContent class="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Task</TableHead>
              <TableHead class="text-right">Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="task in tasks" :key="task.id">
              <TableCell class="font-medium">{{ task.name }}</TableCell>
              <TableCell class="text-right">
                <span :class="`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${task.statusColor}`">{{ task.status }}</span>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  </div>
</template>