finxol.io
Personal blog
finxol.io
blog
feat: add "currently in" badge
+41
+1
app/app.vue
+1
app/app.vue
+40
app/components/Country.vue
+40
app/components/Country.vue
···
1
+
<script setup lang="ts">
2
+
const data = await $fetch("https://hook.finxol.io/sensors/country")
3
+
.then((res) => {
4
+
return res as { country: string; country_code: string };
5
+
})
6
+
.catch((e) => {
7
+
console.error(e);
8
+
});
9
+
10
+
const country = data?.country;
11
+
12
+
const letterA = "a".codePointAt(0);
13
+
//biome-ignore format: breaks emoji
14
+
const regionalIndicatorA = '🇦'.codePointAt(0);
15
+
16
+
const toRegionalIndicator = (char: string) =>
17
+
//@ts-ignore
18
+
String.fromCodePoint(char.codePointAt(0) - letterA + regionalIndicatorA);
19
+
20
+
const emoji = data?.country_code
21
+
.split("")
22
+
.map((char) => toRegionalIndicator(char))
23
+
.join("");
24
+
</script>
25
+
26
+
<template>
27
+
<div class="hidden md:flex flex-row items-center gap-2">
28
+
<span>
29
+
Currently in:
30
+
</span>
31
+
<div class="flex flex-row items-center gap-2 bg-stone-200/50 dark:bg-stone-700/60 py-1 px-2 rounded-lg">
32
+
<span>
33
+
{{ emoji }}
34
+
</span>
35
+
<span>
36
+
{{ country }}
37
+
</span>
38
+
</div>
39
+
</div>
40
+
</template>