Vertical table with employee profile details

<!--
  Сетевое изображение (unsplash) заменено локальным 1x1 data-URI (`PIXEL`,
  та же константа что в блоках `avatar`/`badge`) — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"

const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <div class="mx-auto flex w-full max-w-lg flex-col">
    <div class="bg-background overflow-hidden rounded-lg border">
      <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">Employee</TableCell>
            <TableCell class="py-2">
              <div class="flex items-center gap-2">
                <Avatar size="sm">
                  <AvatarImage :src="PIXEL" alt="Sarah Chen" />
                  <AvatarFallback>SC</AvatarFallback>
                </Avatar>
                <div class="flex flex-col leading-none">
                  <span class="text-sm font-medium">Sarah Chen</span>
                  <span class="text-muted-foreground text-xs">Lead Product Designer</span>
                </div>
              </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">Department</TableCell>
            <TableCell class="py-2 text-sm">Design & User Experience</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">Email</TableCell>
            <TableCell class="text-primary py-2 text-sm">sarah.chen@acmecorp.com</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">Location</TableCell>
            <TableCell class="py-2 text-sm">San Francisco, CA</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">Status</TableCell>
            <TableCell class="py-2">
              <Badge variant="success-light" size="sm">Active</Badge>
            </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">Start Date</TableCell>
            <TableCell class="py-2 text-sm">March 15, 2022</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">Reports To</TableCell>
            <TableCell class="py-2 text-sm">James Rodriguez, VP of Design</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  </div>
</template>