console/app/components/showcase/Separator.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
<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const types = ['solid', 'dashed', 'dotted'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
const positions = ['start', 'center', 'end'] as const
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Types">
      <div class="flex w-full max-w-lg flex-col gap-4">
        <USeparator v-for="t in types" :key="t" :type="t" :label="t" color="neutral" class="capitalize" />
      </div>
    </GallerySection>

    <GallerySection title="Colors">
      <div class="flex w-full max-w-lg flex-col gap-4">
        <USeparator v-for="c in colors" :key="c" :color="c" :label="c" class="capitalize" />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex w-full max-w-lg flex-col gap-4">
        <USeparator v-for="s in sizes" :key="s" :size="s" :label="s" color="primary" />
      </div>
    </GallerySection>

    <GallerySection title="Label positions">
      <div class="flex w-full max-w-lg flex-col gap-4">
        <USeparator v-for="p in positions" :key="p" :position="p" :label="p" color="neutral" class="capitalize" />
      </div>
    </GallerySection>

    <GallerySection title="With icon">
      <div class="flex w-full max-w-lg flex-col gap-4">
        <USeparator icon="i-material-symbols-webhook" color="primary" />
        <USeparator icon="i-material-symbols-deployed-code-outline" color="secondary" />
        <USeparator icon="i-material-symbols-timer-outline" color="warning" />
      </div>
    </GallerySection>

    <GallerySection title="With avatar">
      <div class="flex w-full max-w-lg flex-col gap-4">
        <USeparator :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4', alt: 'Agent' }" color="neutral" />
      </div>
    </GallerySection>

    <GallerySection title="Vertical orientation">
      <div class="flex h-16 items-center gap-4">
        <span class="text-sm text-muted">Session start</span>
        <USeparator orientation="vertical" color="primary" size="sm" />
        <span class="text-sm text-muted">Runtime handoff</span>
        <USeparator orientation="vertical" color="secondary" size="sm" type="dashed" />
        <span class="text-sm text-muted">Lease acquired</span>
        <USeparator orientation="vertical" color="success" size="sm" />
        <span class="text-sm text-muted">Job dispatched</span>
      </div>
    </GallerySection>

    <GallerySection title="Realistic usage">
      <div class="w-full max-w-lg rounded-lg border border-default p-4 flex flex-col gap-3">
        <p class="text-sm font-semibold text-highlighted">Active jobs</p>
        <div class="flex flex-col gap-2">
          <div class="flex items-center justify-between text-sm">
            <span class="text-default">job:inference-batch-01</span>
            <UBadge color="success" variant="soft" size="xs">running</UBadge>
          </div>
          <USeparator color="neutral" type="dashed" />
          <div class="flex items-center justify-between text-sm">
            <span class="text-default">job:embed-documents-07</span>
            <UBadge color="info" variant="soft" size="xs">queued</UBadge>
          </div>
          <USeparator color="neutral" type="dashed" />
          <div class="flex items-center justify-between text-sm">
            <span class="text-default">job:eval-suite-03</span>
            <UBadge color="warning" variant="soft" size="xs">pending</UBadge>
          </div>
        </div>
        <USeparator label="completed" color="success" size="xs" type="dotted" />
        <div class="flex flex-col gap-2">
          <div class="flex items-center justify-between text-sm text-muted">
            <span>job:trace-export-02</span>
            <UBadge color="neutral" variant="soft" size="xs">done</UBadge>
          </div>
        </div>
      </div>
    </GallerySection>
  </div>
</template>