jauntywk.bsky.social / keytrace
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Note the claims may need to-doing later

orta f8f0f6c8 1909d193

+34 -25
+34 -25
apps/keytrace.dev/components/ui/NavBar.vue
··· 1 1 <template> 2 - <nav class="sticky top-0 z-40 backdrop-blur-lg bg-kt-root/80 border-b border-zinc-800/50"> 3 - <div class="max-w-5xl mx-auto flex items-center justify-between px-4 h-14"> 4 - <NuxtLink to="/" class="flex items-center gap-2"> 5 - <!-- Logomark --> 6 - <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-violet-600/15 border border-violet-500/20"> 7 - <span class="font-mono text-sm font-bold text-violet-400">kt</span> 8 - </div> 9 - <span class="font-semibold text-zinc-200 text-sm hidden sm:block"> keytrace </span> 10 - <span class="px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider text-amber-400 bg-amber-500/15 border border-amber-500/30 rounded">alpha</span> 11 - </NuxtLink> 2 + <div class="sticky top-0 z-40"> 3 + <nav class="backdrop-blur-lg bg-kt-root/80 border-b border-zinc-800/50"> 4 + <div class="max-w-5xl mx-auto flex items-center justify-between px-4 h-14"> 5 + <NuxtLink to="/" class="flex items-center gap-2"> 6 + <!-- Logomark --> 7 + <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-violet-600/15 border border-violet-500/20"> 8 + <span class="font-mono text-sm font-bold text-violet-400">kt</span> 9 + </div> 10 + <span class="font-semibold text-zinc-200 text-sm hidden sm:block"> keytrace </span> 11 + <span class="px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider text-amber-400 bg-amber-500/15 border border-amber-500/30 rounded">alpha</span> 12 + </NuxtLink> 12 13 13 - <!-- Mobile: icon buttons. Desktop: full nav --> 14 - <div class="flex items-center gap-2"> 15 - <NuxtLink v-if="showAddClaim" to="/add" class="sm:px-3 sm:py-1.5 p-2 text-sm text-zinc-400 hover:text-zinc-200 transition-colors"> 16 - <PlusIcon class="w-5 h-5 sm:hidden" /> 17 - <span class="hidden sm:inline">Add claim</span> 18 - </NuxtLink> 14 + <!-- Mobile: icon buttons. Desktop: full nav --> 15 + <div class="flex items-center gap-2"> 16 + <NuxtLink v-if="showAddClaim" to="/add" class="sm:px-3 sm:py-1.5 p-2 text-sm text-zinc-400 hover:text-zinc-200 transition-colors"> 17 + <PlusIcon class="w-5 h-5 sm:hidden" /> 18 + <span class="hidden sm:inline">Add claim</span> 19 + </NuxtLink> 19 20 20 - <!-- Avatar/login button --> 21 - <slot name="user"> 22 - <button class="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex items-center justify-center"> 23 - <img v-if="avatarUrl" :src="avatarUrl" class="w-full h-full object-cover" /> 24 - <UserIcon v-else class="w-4 h-4 text-zinc-500" /> 25 - </button> 26 - </slot> 21 + <!-- Avatar/login button --> 22 + <slot name="user"> 23 + <button class="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex items-center justify-center"> 24 + <img v-if="avatarUrl" :src="avatarUrl" class="w-full h-full object-cover" /> 25 + <UserIcon v-else class="w-4 h-4 text-zinc-500" /> 26 + </button> 27 + </slot> 28 + </div> 27 29 </div> 30 + </nav> 31 + <!-- Alpha warning banner --> 32 + <div class="bg-amber-500/10 border-b border-amber-500/20 px-4 py-2"> 33 + <p class="max-w-5xl mx-auto text-xs text-amber-300/90 text-center"> 34 + <TriangleAlertIcon class="w-3 h-3 inline-block mr-1 -mt-0.5" /> 35 + Keytrace is in alpha. You likely will need to re-verify your claims when we it goes live. 36 + </p> 28 37 </div> 29 - </nav> 38 + </div> 30 39 </template> 31 40 32 41 <script setup lang="ts"> 33 - import { Plus as PlusIcon, User as UserIcon } from "lucide-vue-next"; 42 + import { Plus as PlusIcon, User as UserIcon, TriangleAlert as TriangleAlertIcon } from "lucide-vue-next"; 34 43 35 44 defineProps<{ 36 45 avatarUrl?: string;