font awesome

src/scripts/components/Translation.vue

@@ -1,4 +1,5 @@
 <script>
+
 export default {
   props: ['data', 'type'],
   computed: {
@@ -11,7 +12,7 @@ export default {
       }
       return ret;
     }
-  }  
+  },
 
 }
 </script>
@@ -70,6 +71,12 @@ export default {
 <div class="overflow-hidden shadow-md sm:rounded-lg  justify-center">
     <div v-for="(t, i) in termsDataDict" :key="i" class="border-b odd:bg-white even:bg-gray-50 p-2">
     <span class="text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white">{{ i }} </span>
+    <span v-if="t[0].pronunciations" class="mx-2">
+        
+        <span class="mx-1 text-sm font-bold" 
+              v-bind:class="{ 'text-green-800': i == 0, 'text-blue-800': i == 1, 'text-red-800': i == 3 }" 
+              v-for="(p,i) in t[0].pronunciations" :key="i">[{{ p.ipa }}]<i class="fa ml-1 fa-play-circle"></i></span>  
+    </span>
         <div class="px-10">
         <span v-for="(tt, n) in t" :key="n" class="text-sm text-gray-500  dark:text-gray-400">
             {{ tt.string2 }}<span v-if="n != t.length-1">, </span>

src/scripts/main.js

@@ -4,6 +4,7 @@ import './index.css'
 import { Application, Controller } from '@hotwired/stimulus'
 import "@hotwired/turbo"
 import 'flowbite';
+import '@fortawesome/fontawesome-free/js/all.js';
 
 
 const LibStimulus = new Application(document.documentElement)