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": {