Service status summary stacked within a frame

<script setup lang="ts">
import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/reui/alert"
import { Frame, FramePanel } from "@/components/reui/frame"
import { Button } from "@/components/ui/button"
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Frame stacked>
      <FramePanel class="overflow-hidden p-0!">
        <Alert variant="success" class="border-0 bg-transparent shadow-none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-database"
          >
            <ellipse cx="12" cy="5" rx="9" ry="3" />
            <path d="M3 5V19A9 3 0 0 0 21 19V5" />
            <path d="M3 12A9 3 0 0 0 21 12" />
          </svg>
          <AlertTitle>Database Connected</AlertTitle>
          <AlertDescription>
            All systems operational. Last sync: 2 minutes ago.
          </AlertDescription>
        </Alert>
      </FramePanel>
      <FramePanel class="overflow-hidden p-0!">
        <Alert variant="warning" class="border-0 bg-transparent shadow-none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-globe"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
            <path d="M2 12h20" />
          </svg>
          <AlertTitle>API Latency Warning</AlertTitle>
          <AlertAction>
            <Button size="xs" variant="outline" class="h-7">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="lucide lucide-refresh-cw mr-1 size-3"
              >
                <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
                <path d="M21 3v5h-5" />
                <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
                <path d="M8 16H3v5" />
              </svg>
              Retry
            </Button>
          </AlertAction>
          <AlertDescription>
            Increased latency detected in US-East regions. Our engineers are
            investigating.
          </AlertDescription>
        </Alert>
      </FramePanel>
    </Frame>
  </div>
</template>