console/app/components/showcase/Carousel.vue at main · agentruntimecontrolprotocol/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<script setup lang="ts">
const agentSlides = [
  { id: 'agt-001', label: 'Ingestion Agent', status: 'Running', icon: 'i-material-symbols-sync-outline', color: 'primary' },
  { id: 'agt-002', label: 'Validation Agent', status: 'Idle', icon: 'i-material-symbols-check-circle-outline', color: 'success' },
  { id: 'agt-003', label: 'Transform Agent', status: 'Running', icon: 'i-material-symbols-transform', color: 'info' },
  { id: 'agt-004', label: 'Dispatch Agent', status: 'Error', icon: 'i-material-symbols-error-outline', color: 'error' },
  { id: 'agt-005', label: 'Cleanup Agent', status: 'Pending', icon: 'i-material-symbols-pending-outline', color: 'neutral' },
]

const traceSlides = [
  { trace: 'TRC-8821', event: 'session.started', ts: '09:01:02', color: 'success' },
  { trace: 'TRC-8822', event: 'job.accepted', ts: '09:01:05', color: 'primary' },
  { trace: 'TRC-8823', event: 'runtime.leased', ts: '09:01:08', color: 'info' },
  { trace: 'TRC-8824', event: 'job.completed', ts: '09:01:44', color: 'success' },
  { trace: 'TRC-8825', event: 'session.closed', ts: '09:01:47', color: 'neutral' },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic (arrows + dots)">
      <UCarousel
        :items="agentSlides"
        arrows
        dots
        class="w-full max-w-lg"
        :ui="{ item: 'basis-full' }"
      >
        <template #default="{ item }">
          <div class="flex h-40 flex-col items-center justify-center gap-3 rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated) p-6">
            <UIcon :name="item.icon" class="size-10 text-(--ui-primary)" />
            <div class="text-center">
              <p class="font-semibold text-(--ui-text)">{{ item.label }}</p>
              <p class="text-sm text-(--ui-text-muted)">{{ item.id }} · {{ item.status }}</p>
            </div>
          </div>
        </template>
      </UCarousel>
    </GallerySection>

    <GallerySection title="Dots only">
      <UCarousel
        :items="traceSlides"
        dots
        class="w-full max-w-lg"
        :ui="{ item: 'basis-full' }"
      >
        <template #default="{ item }">
          <div class="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated) p-6">
            <UBadge :color="item.color" variant="soft">{{ item.event }}</UBadge>
            <p class="text-sm text-(--ui-text-muted)">{{ item.trace }} · {{ item.ts }}</p>
          </div>
        </template>
      </UCarousel>
    </GallerySection>

    <GallerySection title="Multi-slide peek">
      <UCarousel
        :items="agentSlides"
        arrows
        class="w-full max-w-2xl"
        :ui="{ item: 'basis-1/3' }"
      >
        <template #default="{ item }">
          <div class="mx-2 flex h-36 flex-col items-center justify-center gap-2 rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated) p-4">
            <UIcon :name="item.icon" class="size-8 text-(--ui-primary)" />
            <p class="text-sm font-medium text-(--ui-text)">{{ item.label }}</p>
            <UBadge :color="item.color" variant="subtle" size="xs">{{ item.status }}</UBadge>
          </div>
        </template>
      </UCarousel>
    </GallerySection>

    <GallerySection title="Autoplay">
      <UCarousel
        :items="traceSlides"
        :autoplay="{ delay: 2000 }"
        dots
        class="w-full max-w-lg"
        :ui="{ item: 'basis-full' }"
      >
        <template #default="{ item }">
          <div class="flex h-28 flex-col items-center justify-center gap-2 rounded-lg border border-(--ui-border) bg-(--ui-bg) p-6">
            <UIcon name="i-material-symbols-timeline" class="size-6 text-(--ui-primary)" />
            <p class="font-mono text-sm text-(--ui-text)">{{ item.event }}</p>
            <p class="text-xs text-(--ui-text-muted)">{{ item.trace }} at {{ item.ts }}</p>
          </div>
        </template>
      </UCarousel>
    </GallerySection>

    <GallerySection title="Vertical orientation">
      <UCarousel
        :items="agentSlides"
        orientation="vertical"
        arrows
        dots
        class="h-48 w-full max-w-xs"
        :ui="{ item: 'basis-full' }"
      >
        <template #default="{ item }">
          <div class="flex h-full flex-row items-center gap-4 rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated) px-6 py-4">
            <UIcon :name="item.icon" class="size-8 shrink-0 text-(--ui-primary)" />
            <div>
              <p class="font-semibold text-(--ui-text)">{{ item.label }}</p>
              <p class="text-xs text-(--ui-text-muted)">{{ item.id }}</p>
            </div>
            <UBadge :color="item.color" variant="soft" class="ml-auto" size="xs">{{ item.status }}</UBadge>
          </div>
        </template>
      </UCarousel>
    </GallerySection>
  </div>
</template>