console/app/components/showcase/Footer.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<script setup lang="ts">
const columns = [
  {
    label: 'Runtime',
    children: [
      { label: 'Sessions', icon: 'i-material-symbols-terminal-outline' },
      { label: 'Jobs', icon: 'i-material-symbols-work-outline' },
      { label: 'Leases', icon: 'i-material-symbols-lock-clock-outline' },
    ],
  },
  {
    label: 'Observability',
    children: [
      { label: 'Traces', icon: 'i-material-symbols-timeline-outline' },
      { label: 'Events', icon: 'i-material-symbols-event-note-outline' },
      { label: 'Logs', icon: 'i-material-symbols-article-outline' },
    ],
  },
  {
    label: 'Agents',
    children: [
      { label: 'Registry', icon: 'i-material-symbols-hub-outline' },
      { label: 'Deployments', icon: 'i-material-symbols-rocket-launch-outline' },
      { label: 'Policies', icon: 'i-material-symbols-policy-outline' },
    ],
  },
]
</script>

<template>
  <div class="flex flex-col gap-8">

    <GallerySection title="Basic footer — left / center / right slots">
      <div class="w-full rounded-lg border border-(--ui-border) overflow-hidden">
        <UFooter>
          <template #left>
            <div class="flex items-center gap-2 text-sm text-(--ui-text-muted)">
              <UIcon name="i-material-symbols-memory-outline" class="size-4" />
              <span>ARCP Runtime v2.4.1</span>
            </div>
          </template>

          <template #default>
            <div class="flex items-center gap-4 text-sm text-(--ui-text-muted)">
              <span>Status</span>
              <span>Docs</span>
              <span>Changelog</span>
            </div>
          </template>

          <template #right>
            <div class="flex items-center gap-2 text-sm text-(--ui-text-muted)">
              <UIcon name="i-material-symbols-circle" class="size-2 text-success" />
              <span>All agents operational</span>
            </div>
          </template>
        </UFooter>
      </div>
    </GallerySection>

    <GallerySection title="Footer with top slot (columns nav)">
      <div class="w-full rounded-lg border border-(--ui-border) overflow-hidden">
        <UFooter>
          <template #top>
            <UContainer>
              <UFooterColumns :columns="columns" />
            </UContainer>
          </template>

          <template #left>
            <div class="flex items-center gap-2">
              <UIcon name="i-material-symbols-hub-outline" class="size-5 text-primary" />
              <span class="text-sm font-semibold">Agent Runtime Control Protocol</span>
            </div>
          </template>

          <template #right>
            <p class="text-xs text-(--ui-text-muted)">
              &copy; 2026 ARCP Authors. Apache 2.0 License.
            </p>
          </template>
        </UFooter>
      </div>
    </GallerySection>

    <GallerySection title="Footer with bottom slot (status bar)">
      <div class="w-full rounded-lg border border-(--ui-border) overflow-hidden">
        <UFooter>
          <template #left>
            <div class="flex items-center gap-2">
              <UIcon name="i-material-symbols-hub-outline" class="size-5 text-primary" />
              <span class="text-sm font-semibold">ARCP Console</span>
            </div>
          </template>

          <template #right>
            <div class="flex items-center gap-3 text-sm text-(--ui-text-muted)">
              <UIcon name="i-material-symbols-help-outline" class="size-4" />
              <UIcon name="i-material-symbols-settings-outline" class="size-4" />
            </div>
          </template>

          <template #bottom>
            <div class="flex items-center justify-center gap-6 py-2 text-xs text-(--ui-text-muted) border-t border-(--ui-border)">
              <span class="flex items-center gap-1">
                <UIcon name="i-material-symbols-speed-outline" class="size-3" />
                Latency: 12 ms
              </span>
              <span class="flex items-center gap-1">
                <UIcon name="i-material-symbols-memory-outline" class="size-3" />
                4 active agents
              </span>
              <span class="flex items-center gap-1">
                <UIcon name="i-material-symbols-event-note-outline" class="size-3" />
                1,024 events today
              </span>
            </div>
          </template>
        </UFooter>
      </div>
    </GallerySection>

    <GallerySection title="FooterColumns standalone">
      <div class="w-full rounded-lg border border-(--ui-border) p-6 overflow-hidden">
        <UFooterColumns :columns="columns" />
      </div>
    </GallerySection>

  </div>
</template>