davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2import type { ModuleReplacement } from 'module-replacements'
3
4const props = defineProps<{
5 packageName: string
6 replacement: ModuleReplacement
7 /** Whether this suggestion should show the "no dep" action (native/simple) or just info (documented) */
8 variant: 'nodep' | 'info'
9 /** Whether to show the action button (defaults to true) */
10 showAction?: boolean
11}>()
12
13const emit = defineEmits<{
14 addNoDep: []
15}>()
16
17const docUrl = computed(() => {
18 if (props.replacement.type !== 'documented' || !props.replacement.docPath) return null
19 return `https://e18e.dev/docs/replacements/${props.replacement.docPath}.html`
20})
21</script>
22
23<template>
24 <div
25 class="flex items-start gap-2 px-3 py-2 rounded-lg text-sm"
26 :class="
27 variant === 'nodep'
28 ? 'bg-amber-500/10 border border-amber-600/30 text-amber-800 dark:text-amber-400'
29 : 'bg-blue-500/10 border border-blue-600/30 text-blue-700 dark:text-blue-400'
30 "
31 >
32 <span
33 class="w-4 h-4 flex-shrink-0 mt-0.5"
34 :class="variant === 'nodep' ? 'i-lucide:lightbulb' : 'i-lucide:info'"
35 />
36 <div class="min-w-0 flex-1">
37 <p class="font-medium">{{ packageName }}: {{ $t('package.replacement.title') }}</p>
38 <p class="text-xs mt-0.5 opacity-80">
39 <template v-if="replacement.type === 'native'">
40 {{
41 $t('package.replacement.native', {
42 replacement: replacement.replacement,
43 nodeVersion: replacement.nodeVersion,
44 })
45 }}
46 </template>
47 <template v-else-if="replacement.type === 'simple'">
48 {{
49 $t('package.replacement.simple', {
50 replacement: replacement.replacement,
51 community: $t('package.replacement.community'),
52 })
53 }}
54 </template>
55 <template v-else-if="replacement.type === 'documented'">
56 {{
57 $t('package.replacement.documented', {
58 community: $t('package.replacement.community'),
59 })
60 }}
61 </template>
62 </p>
63 </div>
64
65 <!-- No dependency action button -->
66 <ButtonBase
67 v-if="variant === 'nodep' && showAction !== false"
68 size="small"
69 :aria-label="$t('compare.no_dependency.add_column')"
70 @click="emit('addNoDep')"
71 >
72 {{ $t('package.replacement.consider_no_dep') }}
73 </ButtonBase>
74
75 <!-- Info link -->
76 <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
77 {{ $t('package.replacement.learn_more') }}
78 </LinkBase>
79 </div>
80</template>