wip

Author: gameroman

app/components/Package/Replacement.vue

@@ -48,51 +48,48 @@ const replacementDescription = useMarkdown(() => ({
           >
         </template>
       </i18n-t>
-    <div v-else-if="replacement.type === 'simple'" class="block">
+      <template v-else-if="replacement.type === 'simple' || replacement.type === 'removal'">
         <span v-html="replacementDescription" />
-    </div>
-    <i18n-t
-      v-else-if="replacement.type === 'documented'"
-      keypath="package.replacement.documented"
-      scope="global"
-    >
-      <template #replacement>
-        <code>{{ replacement.replacementModule }}</code>
       </template>
-      <template #community>
-        <a
-          href="https://e18e.dev/docs/replacements/"
-          target="_blank"
-          rel="noopener noreferrer"
-          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"
-        >
-          {{ $t('package.replacement.community') }}
-          <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
-        </a>
+      <i18n-t
+        v-else-if="replacement.type === 'documented'"
+        keypath="package.replacement.documented"
+        scope="global"
+      >
+        <template #replacement>
+          <code>{{ replacement.replacementModule }}</code>
+        </template>
+        <template #community>
+          <a
+            href="https://e18e.dev/docs/replacements/"
+            target="_blank"
+            rel="noopener noreferrer"
+            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"
+          >
+            {{ $t('package.replacement.community') }}
+            <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
+          </a>
+        </template>
+      </i18n-t>
+      <template v-else>
+        {{ $t('package.replacement.none') }}
       </template>
-    </i18n-t>
-    <template v-else-if="replacement.type === 'removal'">
-        <span v-html="replacementDescription" />
-    </template>
-    <template v-else>
-      {{ $t('package.replacement.none') }}
-    </template>
-    <a
-      v-if="externalUrl"
-      :href="externalUrl"
-      target="_blank"
-      rel="noopener noreferrer"
-      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"
-    >
-      {{ $t('package.replacement.learn_more') }}
-      <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
-    </a>
-  </p>
-      <div v-if="replacement.example">
-        <strong class="block mb-1.5">{{ $t('package.replacement.example') }}</strong>
-        <pre
-          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"
-        ><code>{{ replacement.example }}</code></pre>
-      </div>
+      <a
+        v-if="externalUrl"
+        :href="externalUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        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"
+      >
+        {{ $t('package.replacement.learn_more') }}
+        <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
+      </a>
+    </p>
+    <div v-if="replacement.type === 'documented' && replacement.example">
+      <strong class="block mb-1.5">{{ $t('package.replacement.example') }}</strong>
+      <pre
+        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"
+      ><code>{{ replacement.example }}</code></pre>
+    </div>
   </div>
 </template>