console/app/components/showcase/Link.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
131
132
133
134
135
<script setup lang="ts">
const internalLinks = [
  { label: 'Dashboard', to: '/' },
  { label: 'Jobs', to: '/jobs' },
  { label: 'Sessions', to: '/sessions' },
  { label: 'Traces', to: '/traces' },
]

const externalLinks = [
  { label: 'ARCP Spec', href: 'https://agentruntimecontrolprotocol.io', target: '_blank' as const },
  { label: 'GitHub', href: 'https://github.com/agentruntimecontrolprotocol', target: '_blank' as const },
  { label: 'Changelog', href: 'https://agentruntimecontrolprotocol.io/changelog', target: '_blank' as const },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Default (internal)">
      <div class="flex flex-wrap gap-4">
        <ULink v-for="link in internalLinks" :key="link.label" :to="link.to">
          {{ link.label }}
        </ULink>
      </div>
    </GallerySection>

    <GallerySection title="External links">
      <div class="flex flex-wrap gap-4">
        <ULink
          v-for="link in externalLinks"
          :key="link.label"
          :href="link.href"
          :target="link.target"
          rel="noopener noreferrer"
        >
          {{ link.label }}
        </ULink>
      </div>
    </GallerySection>

    <GallerySection title="Active state">
      <div class="flex flex-wrap gap-4">
        <ULink to="/jobs" active-class="font-bold text-primary-500" inactive-class="text-neutral-400">
          Always active (forced)
        </ULink>
        <ULink :active="true" active-class="underline text-success-600">
          Forced active link
        </ULink>
        <ULink :active="false" inactive-class="opacity-50 cursor-not-allowed">
          Forced inactive link
        </ULink>
      </div>
    </GallerySection>

    <GallerySection title="Disabled">
      <div class="flex flex-wrap gap-4">
        <ULink disabled>
          Disabled link
        </ULink>
        <ULink disabled to="/sessions">
          Disabled session link
        </ULink>
      </div>
    </GallerySection>

    <GallerySection title="Raw (custom styling only)">
      <div class="flex flex-wrap gap-4">
        <ULink
          raw
          to="/jobs"
          class="rounded-md bg-primary-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-600"
        >
          View Jobs
        </ULink>
        <ULink
          raw
          to="/traces"
          class="rounded-md border border-neutral-300 px-3 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
        >
          Browse Traces
        </ULink>
        <ULink
          raw
          href="https://agentruntimecontrolprotocol.io"
          target="_blank"
          class="text-sm text-info-500 underline underline-offset-2 hover:text-info-700"
        >
          ARCP Docs ↗
        </ULink>
      </div>
    </GallerySection>

    <GallerySection title="Custom slot (active-aware)">
      <div class="flex flex-wrap gap-6">
        <ULink v-slot="{ active }" to="/" custom>
          <span
            :class="[
              'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition',
              active
                ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
                : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100',
            ]"
          >
            <span class="i-material-symbols-home-outline h-4 w-4" />
            Runtime Home
          </span>
        </ULink>
        <ULink v-slot="{ active }" to="/agents" custom>
          <span
            :class="[
              'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition',
              active
                ? 'bg-success-100 text-success-700 dark:bg-success-900 dark:text-success-300'
                : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100',
            ]"
          >
            <span class="i-material-symbols-smart-toy-outline h-4 w-4" />
            Agents
          </span>
        </ULink>
      </div>
    </GallerySection>

    <GallerySection title="Realistic usage — ARCP breadcrumb trail">
      <nav class="flex items-center gap-1 text-sm text-neutral-500 dark:text-neutral-400">
        <ULink raw to="/" class="hover:text-neutral-800 dark:hover:text-neutral-200">Runtime</ULink>
        <span class="i-material-symbols-chevron-right h-4 w-4" />
        <ULink raw to="/sessions" class="hover:text-neutral-800 dark:hover:text-neutral-200">Sessions</ULink>
        <span class="i-material-symbols-chevron-right h-4 w-4" />
        <ULink raw to="/sessions/abc-123" class="hover:text-neutral-800 dark:hover:text-neutral-200">abc-123</ULink>
        <span class="i-material-symbols-chevron-right h-4 w-4" />
        <span class="font-medium text-neutral-800 dark:text-neutral-100">Events</span>
      </nav>
    </GallerySection>
  </div>
</template>