Remove ineffecient flag library

vicvancooten · Aug 25, 2024 · eecd008 · eecd008
1 parent 369b6a0
commit eecd008
Show file tree

Hide file tree

Showing 5 changed files with 592 additions and 10 deletions.
diff --git a/app.vue b/app.vue
@@ -198,6 +198,8 @@ a {
       justify-content: center;
       align-items: start;
       justify-items: stretch;
+      border-top: 1px solid var(--accent-color-semi-transparent);
+      padding-top: 2rem;
 
       .fact {
         header {

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/Duolingo.vue b/components/Duolingo.vue
@@ -14,10 +14,9 @@
 
       <!-- Languages -->
       <div v-for="language in languages" :key="language.id">
-        <CountryFlag
-          :country="language.language"
-          size="small"
-          :title="language.title"
+        <NuxtImg
+          :src="`https://aiclientportalprod.blob.core.windows.net/clientportal/static/flags/${language.language}.svg`"
+          class="flag"
         />
         <strong>{{ Intl.NumberFormat('nl-NL').format(language.xp) }}</strong>
         XP
@@ -27,7 +26,6 @@
 </template>
 
 <script lang="ts" setup>
-import CountryFlag from 'vue-country-flag-next'
 const { data } = await useFetch('/api/duolingo')
 const success = data.value?.success
 const streak = data.value?.streak ?? -1
@@ -40,10 +38,9 @@ const languages = (data.value?.languages ?? []).slice(0, 2)
   align-items: center;
   gap: 0.5rem;
 
-  .small-flag {
-    border-radius: 50%;
-    width: 3rem;
-    height: 3rem;
+  .flag {
+    width: 1rem;
+    height: 1rem;
   }
 }
 </style>