davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2const props = defineProps<{
3 engines?: Record<string, string>
4}>()
5
6const engineNames: Record<string, string> = {
7 bun: 'Bun',
8 node: 'Node.js',
9 npm: 'npm',
10}
11
12// Map engine name to icon class
13const engineIcons: Record<string, string> = {
14 bun: 'i-simple-icons:bun',
15 node: 'i-simple-icons:nodedotjs',
16 npm: 'i-simple-icons:npm',
17 pnpm: 'i-simple-icons:pnpm',
18 yarn: 'i-simple-icons:yarn',
19}
20
21function getName(engine: string): string {
22 return engineNames[engine] || engine
23}
24
25function getIcon(engine: string): string {
26 return engineIcons[engine] || 'i-lucide:code'
27}
28
29const sortedEngines = computed(() => {
30 const entries = Object.entries(props.engines ?? {})
31 return entries.sort(([a], [b]) => a.localeCompare(b))
32})
33</script>
34<template>
35 <CollapsibleSection
36 v-if="sortedEngines.length"
37 :title="$t('package.compatibility')"
38 id="compatibility"
39 >
40 <dl class="space-y-2">
41 <div
42 v-for="[engine, version] in sortedEngines"
43 :key="engine"
44 class="flex justify-between gap-4 py-1"
45 >
46 <dt class="flex items-center gap-2 text-fg-muted text-sm shrink-0">
47 <span
48 :class="[getIcon(engine), 'inline-block w-4 h-4 shrink-0 text-fg-muted']"
49 aria-hidden="true"
50 />
51 {{ getName(engine) }}
52 </dt>
53 <dd class="font-mono text-sm text-fg text-end" :title="version" dir="ltr">
54 {{ version }}
55 </dd>
56 </div>
57 </dl>
58 </CollapsibleSection>
59</template>