<template>
  <UPageCard class="bg-background-100 my-10">
    <p class="text-xl">
      {{ $t('pages.vocal-synthesis.tools') }}
    </p>
    <div class="flex flex-row gap-5 flex-wrap">
      <UBadge
        v-for="tool in data?.tools"
        :key="tool"
        size="md"
        variant="solid"
        >{{ tool }}</UBadge
      >
    </div>
  </UPageCard>
</template>

<script setup lang="ts">
const { getCachedData } = useDataJson('vocalSynth');
const data = getCachedData();
</script>
