diff --git a/app.vue b/app.vue
index f6222f9..8635ab4 100644
--- 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
index e3ca04b..e62ccc1 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/Duolingo.vue b/components/Duolingo.vue
index 34e8004..52f142c 100644
--- 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>
diff --git a/components/Flag.vue.vue b/components/Flag.vue.vue
new file mode 100644
index 0000000..dc0c6be
--- /dev/null
+++ b/components/Flag.vue.vue
@@ -0,0 +1,584 @@
+<template>
+ <img
+ v-if="country"
+ class="flag"
+ :class="{ rounded: rounded }"
+ :src="flagSrc"
+ />
+</template>
+
+<script lang="ts">
+export default {
+ name: 'FlagComponent',
+ props: {
+ country: {
+ type: String as PropType<FlagCountry>,
+ required: true,
+ },
+ rounded: {
+ type: Boolean,
+ required: false,
+ },
+ },
+ setup(props) {
+ return {
+ flagSrc: computed(
+ () =>
+ `https://aiclientportalprod.blob.core.windows.net/clientportal/static/flags/${props.country?.toLowerCase()}.svg`,
+ ),
+ }
+ },
+}
+
+export const flagOptions: FlagCountry[] = [
+ 'nl',
+ 'mn',
+ 'za',
+ 'ua',
+ 'ie',
+ 'gi',
+ 'et',
+ 'lu',
+ 'au',
+ 'vg',
+ 'nl',
+ 'co',
+ 'tz',
+ 'it',
+ 'ao',
+ 'lv',
+ 'cefta',
+ 'km',
+ 'er',
+ 'dm',
+ 'mv',
+ 'sk',
+ 'sl',
+ 'iq',
+ 'to',
+ 'es-ga',
+ 'tg',
+ 'um',
+ 'es-pv',
+ 'ss',
+ 'pr',
+ 'rs',
+ 'gu',
+ 'cl',
+ 'ne',
+ 'hn',
+ 'pl',
+ 'cf',
+ 'bd',
+ 'ta',
+ 'ki',
+ 'uz',
+ 'xk',
+ 'ea',
+ 'sr',
+ 'ci',
+ 'io',
+ 'rw',
+ 'cz',
+ 'kg',
+ 'qa',
+ 'ws',
+ 'bw',
+ 'eh',
+ 'gy',
+ 'cy',
+ 'se',
+ 'id',
+ 'tv',
+ 'bg',
+ 'sa',
+ 'ic',
+ 'bz',
+ 'gg',
+ 'un',
+ 'bo',
+ 'bl',
+ 'lk',
+ 'uy',
+ 'sb',
+ 'zm',
+ 'sc',
+ 'dg',
+ 'ke',
+ 'cx',
+ 'kr',
+ 'cn',
+ 'tn',
+ 'ni',
+ 'eg',
+ 'vc',
+ 'st',
+ 'pe',
+ 'ls',
+ 'ba',
+ 'td',
+ 'sj',
+ 'aq',
+ 'br',
+ 'sg',
+ 'mp',
+ 'bf',
+ 'mf',
+ 'mr',
+ 'gf',
+ 'dk',
+ 'lc',
+ 'al',
+ 'li',
+ 'gp',
+ 'gb',
+ 'xx',
+ 'bn',
+ 'mq',
+ 'cg',
+ 'gb-eng',
+ 'am',
+ 'nz',
+ 'ga',
+ 'ca',
+ 'mm',
+ 'gb-wls',
+ 'ar',
+ 'pw',
+ 'va',
+ 'nc',
+ 'cu',
+ 'gs',
+ 'ax',
+ 'tj',
+ 'mt',
+ 're',
+ 'bh',
+ 'dz',
+ 'es-ct',
+ 'fj',
+ 'no',
+ 'bb',
+ 'ky',
+ 've',
+ 'pa',
+ 'tf',
+ 'ly',
+ 'gm',
+ 'nr',
+ 'gb-nir',
+ 'me',
+ 'by',
+ 'ae',
+ 'fm',
+ 'gh',
+ 'hu',
+ 'pm',
+ 'mh',
+ 'lr',
+ 'mw',
+ 'ir',
+ 'lb',
+ 'hm',
+ 'so',
+ 'gt',
+ 'cd',
+ 'np',
+ 'ec',
+ 'be',
+ 'ai',
+ 'as',
+ 'hr',
+ 'tw',
+ 'aw',
+ 'sn',
+ 'ro',
+ 'ps',
+ 'bv',
+ 'py',
+ 'af',
+ 'bj',
+ 'la',
+ 'cm',
+ 'pg',
+ 'om',
+ 'us',
+ 'fk',
+ 'si',
+ 'az',
+ 'my',
+ 'ru',
+ 'ug',
+ 'in',
+ 'lt',
+ 'ht',
+ 'vn',
+ 'ac',
+ 'tr',
+ 'kn',
+ 'gr',
+ 'kh',
+ 'ch',
+ 'is',
+ 'md',
+ 'ph',
+ 'fr',
+ 'pk',
+ 'bt',
+ 'tc',
+ 'cp',
+ 'sd',
+ 'ma',
+ 'ng',
+ 'jm',
+ 'sv',
+ 'vi',
+ 'im',
+ 'cc',
+ 'bs',
+ 'sy',
+ 'sh',
+ 'bm',
+ 'nf',
+ 'ml',
+ 'pf',
+ 'na',
+ 'at',
+ 'zw',
+ 'mx',
+ 'mg',
+ 'sx',
+ 'kz',
+ 'kp',
+ 'mo',
+ 'gq',
+ 'il',
+ 'ee',
+ 'dj',
+ 'cr',
+ 'do',
+ 'gd',
+ 'fi',
+ 'cv',
+ 'kw',
+ 'nu',
+ 'ad',
+ 'gb-sct',
+ 'yt',
+ 'ye',
+ 'th',
+ 'pn',
+ 'je',
+ 'sz',
+ 'ge',
+ 'jo',
+ 'wf',
+ 'tt',
+ 'tl',
+ 'ms',
+ 'hk',
+ 'pt',
+ 'gn',
+ 'gl',
+ 'bi',
+ 'mk',
+ 'bq',
+ 'de',
+ 'vu',
+ 'fo',
+ 'es',
+ 'ag',
+ 'mz',
+ 'sm',
+ 'mu',
+ 'tm',
+ 'tk',
+ 'jp',
+ 'ck',
+ 'cw',
+ 'eu',
+ 'mc',
+ 'gw',
+]
+
+export type FlagCountry =
+ | 'en'
+ | 'nl'
+ | 'mn'
+ | 'za'
+ | 'ua'
+ | 'ie'
+ | 'gi'
+ | 'et'
+ | 'lu'
+ | 'au'
+ | 'vg'
+ | 'nl'
+ | 'co'
+ | 'tz'
+ | 'it'
+ | 'ao'
+ | 'lv'
+ | 'cefta'
+ | 'km'
+ | 'er'
+ | 'dm'
+ | 'mv'
+ | 'sk'
+ | 'sl'
+ | 'iq'
+ | 'to'
+ | 'es-ga'
+ | 'tg'
+ | 'um'
+ | 'es-pv'
+ | 'ss'
+ | 'pr'
+ | 'rs'
+ | 'gu'
+ | 'cl'
+ | 'ne'
+ | 'hn'
+ | 'pl'
+ | 'cf'
+ | 'bd'
+ | 'ta'
+ | 'ki'
+ | 'uz'
+ | 'xk'
+ | 'ea'
+ | 'sr'
+ | 'ci'
+ | 'io'
+ | 'rw'
+ | 'cz'
+ | 'kg'
+ | 'qa'
+ | 'ws'
+ | 'bw'
+ | 'eh'
+ | 'gy'
+ | 'cy'
+ | 'se'
+ | 'id'
+ | 'tv'
+ | 'bg'
+ | 'sa'
+ | 'ic'
+ | 'bz'
+ | 'gg'
+ | 'un'
+ | 'bo'
+ | 'bl'
+ | 'lk'
+ | 'uy'
+ | 'sb'
+ | 'zm'
+ | 'sc'
+ | 'dg'
+ | 'ke'
+ | 'cx'
+ | 'kr'
+ | 'cn'
+ | 'tn'
+ | 'ni'
+ | 'eg'
+ | 'vc'
+ | 'st'
+ | 'pe'
+ | 'ls'
+ | 'ba'
+ | 'td'
+ | 'sj'
+ | 'aq'
+ | 'br'
+ | 'sg'
+ | 'mp'
+ | 'bf'
+ | 'mf'
+ | 'mr'
+ | 'gf'
+ | 'dk'
+ | 'lc'
+ | 'al'
+ | 'li'
+ | 'gp'
+ | 'gb'
+ | 'xx'
+ | 'bn'
+ | 'mq'
+ | 'cg'
+ | 'gb-eng'
+ | 'am'
+ | 'nz'
+ | 'ga'
+ | 'ca'
+ | 'mm'
+ | 'gb-wls'
+ | 'ar'
+ | 'pw'
+ | 'va'
+ | 'nc'
+ | 'cu'
+ | 'gs'
+ | 'ax'
+ | 'tj'
+ | 'mt'
+ | 're'
+ | 'bh'
+ | 'dz'
+ | 'es-ct'
+ | 'fj'
+ | 'no'
+ | 'bb'
+ | 'ky'
+ | 've'
+ | 'pa'
+ | 'tf'
+ | 'ly'
+ | 'gm'
+ | 'nr'
+ | 'gb-nir'
+ | 'me'
+ | 'by'
+ | 'ae'
+ | 'fm'
+ | 'gh'
+ | 'hu'
+ | 'pm'
+ | 'mh'
+ | 'lr'
+ | 'mw'
+ | 'ir'
+ | 'lb'
+ | 'hm'
+ | 'so'
+ | 'gt'
+ | 'cd'
+ | 'np'
+ | 'ec'
+ | 'be'
+ | 'ai'
+ | 'as'
+ | 'hr'
+ | 'tw'
+ | 'aw'
+ | 'sn'
+ | 'ro'
+ | 'ps'
+ | 'bv'
+ | 'py'
+ | 'af'
+ | 'bj'
+ | 'la'
+ | 'cm'
+ | 'pg'
+ | 'om'
+ | 'us'
+ | 'fk'
+ | 'si'
+ | 'az'
+ | 'my'
+ | 'ru'
+ | 'ug'
+ | 'in'
+ | 'lt'
+ | 'ht'
+ | 'vn'
+ | 'ac'
+ | 'tr'
+ | 'kn'
+ | 'gr'
+ | 'kh'
+ | 'ch'
+ | 'is'
+ | 'md'
+ | 'ph'
+ | 'fr'
+ | 'pk'
+ | 'bt'
+ | 'tc'
+ | 'cp'
+ | 'sd'
+ | 'ma'
+ | 'ng'
+ | 'jm'
+ | 'sv'
+ | 'vi'
+ | 'im'
+ | 'cc'
+ | 'bs'
+ | 'sy'
+ | 'sh'
+ | 'bm'
+ | 'nf'
+ | 'ml'
+ | 'pf'
+ | 'na'
+ | 'at'
+ | 'zw'
+ | 'mx'
+ | 'mg'
+ | 'sx'
+ | 'kz'
+ | 'kp'
+ | 'mo'
+ | 'gq'
+ | 'il'
+ | 'ee'
+ | 'dj'
+ | 'cr'
+ | 'do'
+ | 'gd'
+ | 'fi'
+ | 'cv'
+ | 'kw'
+ | 'nu'
+ | 'ad'
+ | 'gb-sct'
+ | 'yt'
+ | 'ye'
+ | 'th'
+ | 'pn'
+ | 'je'
+ | 'sz'
+ | 'ge'
+ | 'jo'
+ | 'wf'
+ | 'tt'
+ | 'tl'
+ | 'ms'
+ | 'hk'
+ | 'pt'
+ | 'gn'
+ | 'gl'
+ | 'bi'
+ | 'mk'
+ | 'bq'
+ | 'de'
+ | 'vu'
+ | 'fo'
+ | 'es'
+ | 'ag'
+ | 'mz'
+ | 'sm'
+ | 'mu'
+ | 'tm'
+ | 'tk'
+ | 'jp'
+ | 'ck'
+ | 'cw'
+ | 'eu'
+ | 'mc'
+ | 'gw'
+</script>
+<style lang="scss" scoped>
+.flag {
+ height: 1.2rem;
+}
+.rounded {
+ width: 1.2rem;
+ object-fit: cover;
+ border-radius: 5rem;
+}
+</style>
diff --git a/package.json b/package.json
index b9ae5a2..3635241 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
"nuxt": "^3.11.2",
"prettier": "^3.3.2",
"vue": "^3.4.27",
- "vue-country-flag-next": "^2.3.2",
"vue-router": "^4.3.2"
},
"devDependencies": {