Skip to content

Commit 2464a08

Browse files
gameromangameroman
committed
Update Replacement.vue
1 parent a36b4ce commit 2464a08

1 file changed

Lines changed: 61 additions & 65 deletions

File tree

‎app/components/Package/Replacement.vue‎

Lines changed: 61 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -37,72 +37,68 @@ const nodeVersion = computed(() => {
3737
<span class="i-lucide:lightbulb w-4 h-4" aria-hidden="true" />
3838
{{ $t('package.replacement.title') }}
3939
</h2>
40-
<p class="text-sm m-0">
41-
<i18n-t
42-
v-if="replacement.type === 'native'"
43-
keypath="package.replacement.native"
44-
scope="global"
45-
>
46-
<template #replacement>
47-
<code v-if="replacement.nodeFeatureId?.moduleName">
48-
{{ replacement.nodeFeatureId.moduleName }}
49-
</code>
50-
<code v-else-if="replacement.description">
51-
{{ replacement.description }}
52-
</code>
53-
<span v-else>{{ replacement.id }}</span>
54-
</template>
55-
<template #nodeVersion>
56-
{{ nodeVersion || 'unknown' }}
57-
</template>
58-
</i18n-t>
59-
<span v-else-if="replacement.type === 'simple'">
60-
{{ replacement.description }}
61-
<template v-if="replacement.example">
62-
<div>
63-
<strong>Example:</strong><br />
64-
<pre
65-
class="bg-amber-800/10 dark:bg-amber-950/30 p-2 rounded mt-1 overflow-x-auto text-xs font-mono"
66-
><code>{{ replacement.example }}</code></pre>
67-
</div>
68-
</template>
69-
</span>
70-
<i18n-t
71-
v-else-if="replacement.type === 'documented'"
72-
keypath="package.replacement.documented"
73-
scope="global"
74-
>
75-
<template #replacement>
76-
<code>{{ replacement.replacementModule }}</code>
77-
</template>
78-
<template #community>
79-
<a
80-
href="https://e18e.dev/docs/replacements/"
81-
target="_blank"
82-
rel="noopener noreferrer"
83-
class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
84-
>
85-
{{ $t('package.replacement.community') }}
86-
<span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
87-
</a>
88-
</template>
89-
</i18n-t>
90-
<template v-else-if="replacement.type === 'removal'">
91-
{{ replacement.description }}
40+
<i18n-t
41+
v-if="replacement.type === 'native'"
42+
keypath="package.replacement.native"
43+
scope="global"
44+
>
45+
<template #replacement>
46+
<code v-if="replacement.nodeFeatureId?.moduleName">
47+
{{ replacement.nodeFeatureId.moduleName }}
48+
</code>
49+
<code v-else-if="replacement.description">
50+
{{ replacement.description }}
51+
</code>
52+
<span v-else>{{ replacement.id }}</span>
9253
</template>
93-
<template v-else>
94-
{{ $t('package.replacement.none') }}
54+
<template #nodeVersion>
55+
{{ nodeVersion || 'unknown' }}
9556
</template>
96-
<a
97-
v-if="externalUrl"
98-
:href="externalUrl"
99-
target="_blank"
100-
rel="noopener noreferrer"
101-
class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
102-
>
103-
{{ $t('package.replacement.learn_more') }}
104-
<span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
105-
</a>
106-
</p>
57+
</i18n-t>
58+
<div v-else-if="replacement.type === 'simple'" class="block">
59+
<div class="mb-2">{{ replacement.description }}</div>
60+
<div v-if="replacement.example">
61+
<strong class="block mb-1.5">Example:</strong>
62+
<pre
63+
class="bg-amber-800/10 dark:bg-amber-950/30 p-2 rounded border border-amber-700/20 overflow-x-auto text-xs font-mono leading-relaxed"
64+
><code>{{ replacement.example }}</code></pre>
65+
</div>
66+
</div>
67+
<i18n-t
68+
v-else-if="replacement.type === 'documented'"
69+
keypath="package.replacement.documented"
70+
scope="global"
71+
>
72+
<template #replacement>
73+
<code>{{ replacement.replacementModule }}</code>
74+
</template>
75+
<template #community>
76+
<a
77+
href="https://e18e.dev/docs/replacements/"
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
81+
>
82+
{{ $t('package.replacement.community') }}
83+
<span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
84+
</a>
85+
</template>
86+
</i18n-t>
87+
<template v-else-if="replacement.type === 'removal'">
88+
{{ replacement.description }}
89+
</template>
90+
<template v-else>
91+
{{ $t('package.replacement.none') }}
92+
</template>
93+
<a
94+
v-if="externalUrl"
95+
:href="externalUrl"
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
99+
>
100+
{{ $t('package.replacement.learn_more') }}
101+
<span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
102+
</a>
107103
</div>
108104
</template>

0 commit comments

Comments
 (0)