davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2defineProps<{
3 /** Type of suggestion: 'user' or 'org' */
4 type: 'user' | 'org'
5 /** The name (username or org name) */
6 name: string
7 /** Whether this is an exact match for the query */
8 isExactMatch?: boolean
9 /** Index for keyboard navigation */
10 index?: number
11}>()
12</script>
13
14<template>
15 <BaseCard :isExactMatch="isExactMatch">
16 <NuxtLink
17 :to="
18 type === 'user'
19 ? { name: '~username', params: { username: name } }
20 : { name: 'org', params: { org: name } }
21 "
22 :data-suggestion-index="index"
23 class="flex items-center gap-4 focus-visible:outline-none after:content-[''] after:absolute after:inset-0"
24 >
25 <!-- Avatar placeholder -->
26 <div
27 class="w-10 h-10 shrink-0 flex items-center justify-center border border-border"
28 :class="type === 'org' ? 'rounded-lg bg-bg-muted' : 'rounded-full bg-bg-muted'"
29 aria-hidden="true"
30 >
31 <span class="text-lg text-fg-subtle font-mono">{{ name.charAt(0).toUpperCase() }}</span>
32 </div>
33
34 <div class="min-w-0 flex-1">
35 <div class="flex items-center gap-2">
36 <span
37 class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors"
38 dir="ltr"
39 >
40 {{ type === 'user' ? '~' : '@' }}{{ name }}
41 </span>
42 <span
43 class="text-xs px-1.5 py-0.5 rounded bg-bg-muted border border-border text-fg-muted font-mono"
44 >
45 {{ type === 'user' ? $t('search.suggestion.user') : $t('search.suggestion.org') }}
46 </span>
47 <!-- Exact match badge -->
48 <span
49 v-if="isExactMatch"
50 class="text-xs px-1.5 py-0.5 rounded bg-accent/20 border border-accent/30 text-accent font-mono"
51 >
52 {{ $t('search.exact_match') }}
53 </span>
54 </div>
55 <p class="text-xs sm:text-sm text-fg-muted mt-0.5">
56 {{
57 type === 'user'
58 ? $t('search.suggestion.view_user_packages')
59 : $t('search.suggestion.view_org_packages')
60 }}
61 </p>
62 </div>
63
64 <span
65 class="i-lucide:arrow-right rtl-flip w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
66 aria-hidden="true"
67 />
68 </NuxtLink>
69 </BaseCard>
70</template>