framit/app/components/Ui/BadgeList.vue

<template>
  <div v-if="tools" class="flex flex-row gap-1 flex-wrap">
    <UBadge v-for="tool in tools" :key="tool.name" size="md" variant="solid">
      <span v-if="tool.link">
        <NuxtLink :to="tool.link" target="_blank">
          {{ tool.name }}
        </NuxtLink>
      </span>
      <span v-else>{{ tool.name }}</span>
    </UBadge>
  </div>
</template>

<script setup lang="ts">
import type { Tool } from '../../types/tool';

const { tools } = defineProps<{
  tools: Tool[];
}>();
</script>