Layer Card

<script setup>
import { LayerCard } from "@dicehub/kappa/components/layer-card";
</script>

<template>
  <LayerCard as="article" style="width: 23rem;">
    <LayerCard.Secondary as="header">Deployment window</LayerCard.Secondary>
    <LayerCard.Primary>
      <strong>Tuesday, 18:00–19:00 UTC</strong>
      <span>Four services, twelve checks, no maintenance window conflicts.</span>
      <dl>
        <div><dt>Services</dt><dd>4</dd></div>
        <div><dt>Checks</dt><dd>12 / 12</dd></div>
      </dl>
    </LayerCard.Primary>
  </LayerCard>
</template>

<script setup>
import { LayerCard } from "@dicehub/kappa/components/layer-card";
</script>

<template>
  <LayerCard as="section" style="width: 23rem;">
    <p><strong>Solver diagnostics</strong></p>
    <p>All convergence checks passed. The solution is ready to export.</p>
  </LayerCard>
</template>

<script setup>
import { ArrowRight } from "@lucide/vue";
import { LayerCard } from "@dicehub/kappa/components/layer-card";
</script>

<template>
  <LayerCard style="width: 23rem;">
    <LayerCard.Secondary as="header">Release notes</LayerCard.Secondary>
    <LayerCard.Primary as="a" href="/release-notes">
      <strong>Read the component model <ArrowRight aria-hidden="true" /></strong>
      <span>The primary layer is one semantic anchor.</span>
    </LayerCard.Primary>
  </LayerCard>
</template>

<script setup>
import { LayerCard } from "@dicehub/kappa/components/layer-card";
</script>

<template>
  <LayerCard as="a" href="/reports/run-214" style="width: 23rem;">
    <span>Linked root surface</span>
    <span>Hover and keyboard focus are visible.</span>
  </LayerCard>

  <LayerCard style="width: 23rem;">
    <LayerCard.Secondary as="header">Primary link</LayerCard.Secondary>
    <LayerCard.Primary as="a" href="/reports/run-214">
      <strong>Open the run report</strong>
      <span>Focus stays inside the layered surface.</span>
    </LayerCard.Primary>
  </LayerCard>
</template>

<script setup>
import { computed, ref } from "vue";
import { Badge } from "@dicehub/kappa/components/badge";
import { Input } from "@dicehub/kappa/components/input";
import { LayerCard } from "@dicehub/kappa/components/layer-card";
import { Tabs } from "@dicehub/kappa/components/tabs";

const statusFilters = [
  { value: "all", label: "All" },
  { value: "2xx", label: "2xx" },
  { value: "3xx", label: "3xx" },
  { value: "4xx", label: "4xx" },
  { value: "5xx", label: "5xx" },
];
const statusVariants = { "2xx": "success", "3xx": "info", "4xx": "warning", "5xx": "error" };
const requests = [
  { origin: "api.dicehub.com /v1/runs", status: "2xx", count: 1842, duration: "118 ms" },
  { origin: "legacy.dicehub.com /v0/solve", status: "4xx", count: 96, duration: "812 ms" },
  { origin: "gateway.dicehub.com /solver/health", status: "5xx", count: 12, duration: "2.4 s" },
  // …more origins
];

const search = ref("");
const status = ref("all");
const visible = computed(() => {
  const query = search.value.trim().toLowerCase();
  return requests.filter((request) =>
    (status.value === "all" || request.status === status.value) &&
    (!query || request.origin.toLowerCase().includes(query)),
  );
});
</script>

<template>
  <LayerCard as="section" style="width: 34rem;">
    <LayerCard.Secondary as="header">
      <span>Request log</span>
      <span>{{ visible.length }} / {{ requests.length }}</span>
    </LayerCard.Secondary>
    <LayerCard.Primary>
      <div class="toolbar">
        <Input v-model="search" aria-label="Filter origins" size="sm" placeholder="Filter origins..." />
        <Tabs.Root v-model="status">
          <Tabs.List aria-label="Filter by status" size="sm">
            <Tabs.Trigger v-for="filter in statusFilters" :key="filter.value" :value="filter.value">
              {{ filter.label }}
            </Tabs.Trigger>
            <Tabs.Indicator />
          </Tabs.List>
        </Tabs.Root>
      </div>
      <table aria-label="Request origins">
        <thead>
          <tr><th scope="col">Origin</th><th scope="col">Status</th><th scope="col">Duration</th></tr>
        </thead>
        <tbody>
          <tr v-for="request in visible" :key="request.origin">
            <th scope="row">{{ request.origin }}</th>
            <td><Badge :variant="statusVariants[request.status]">{{ request.status }} · {{ request.count }}</Badge></td>
            <td>{{ request.duration }}</td>
          </tr>
        </tbody>
      </table>
      <p v-if="visible.length === 0" role="status">No origins match the current filter.</p>
      <p>Showing {{ visible.length }} of {{ requests.length }} requests</p>
    </LayerCard.Primary>
  </LayerCard>
</template>