commit 56fbd26cdfdbfd087e9d6f3ca6793c6ddec06dec · finxol.io/blog

app/app.vue

···

       80
        
                       </div>

     

       81
        
       

     

       82
        
                       <div class="flex items-center gap-4 sm:gap-8">

     

       0
        
       
     

       83
        
                           <div

     

       84
        
                               class="cursor-pointer"

     

       85
        
                               @click="toggleDark()"

···

       80
        
                       </div>

     

       81
        
       

     

       82
        
                       <div class="flex items-center gap-4 sm:gap-8">

     

       83
       +
                           <Country />

     

       84
        
                           <div

     

       85
        
                               class="cursor-pointer"

     

       86
        
                               @click="toggleDark()"

+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>