Vertical table with server configuration details

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Frame, FrameDescription, FrameHeader, FramePanel, FrameTitle } from "@/components/reui/frame"
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"
</script>

<template>
  <div class="mx-auto flex w-full max-w-lg flex-col">
    <Frame spacing="sm">
      <FrameHeader class="px-2!">
        <FrameTitle>Droplet Status</FrameTitle>
        <FrameDescription>
          Primary production server
          <Badge variant="outline" size="sm">prod-api-us-east-1</Badge>
        </FrameDescription>
      </FrameHeader>
      <FramePanel class="p-0!">
        <Table>
          <TableBody>
            <TableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell class="bg-muted/50 w-40 py-2 text-sm font-medium">Status</TableCell>
              <TableCell class="py-2">
                <div class="flex items-center gap-2">
                  <span class="relative flex size-2">
                    <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75" />
                    <span class="relative inline-flex size-2 rounded-full bg-green-500" />
                  </span>
                  <span class="text-sm font-medium text-green-600 dark:text-green-400">Operational</span>
                </div>
              </TableCell>
            </TableRow>
            <TableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell class="bg-muted/50 py-2 text-sm font-medium">Instance Type</TableCell>
              <TableCell class="py-2">
                <span class="font-mono text-sm">c6g.2xlarge</span>
              </TableCell>
            </TableRow>
            <TableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell class="bg-muted/50 py-2 text-sm font-medium">Region</TableCell>
              <TableCell class="py-2 text-sm">US East (N. Virginia)</TableCell>
            </TableRow>
            <TableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell class="bg-muted/50 py-2 text-sm font-medium">CPU Usage</TableCell>
              <TableCell class="py-2">
                <div class="flex items-center gap-3">
                  <div class="bg-muted h-2 w-24 overflow-hidden rounded-full">
                    <div class="bg-primary h-full rounded-full" style="width: 42%" />
                  </div>
                  <span class="text-muted-foreground text-sm">42%</span>
                </div>
              </TableCell>
            </TableRow>
            <TableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell class="bg-muted/50 py-2 text-sm font-medium">Memory</TableCell>
              <TableCell class="py-2">
                <div class="flex items-center gap-3">
                  <div class="bg-muted h-2 w-24 overflow-hidden rounded-full">
                    <div class="h-full rounded-full bg-amber-500" style="width: 67%" />
                  </div>
                  <span class="text-muted-foreground text-sm">10.7 / 16 GB</span>
                </div>
              </TableCell>
            </TableRow>
            <TableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell class="bg-muted/50 py-2 text-sm font-medium">Uptime</TableCell>
              <TableCell class="py-2 text-sm">47 days, 12 hours</TableCell>
            </TableRow>
            <TableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell class="bg-muted/50 py-2 text-sm font-medium">OS</TableCell>
              <TableCell class="py-2 text-sm">Amazon Linux 2023</TableCell>
            </TableRow>
            <TableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
              <TableCell class="bg-muted/50 py-2 text-sm font-medium">Tags</TableCell>
              <TableCell class="py-2">
                <div class="flex flex-wrap gap-1.5">
                  <Badge variant="secondary" size="sm">production</Badge>
                  <Badge variant="secondary" size="sm">api</Badge>
                  <Badge variant="secondary" size="sm">critical</Badge>
                </div>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </FramePanel>
    </Frame>
  </div>
</template>