refactor: change LocaleSwitcher to use radio buttons instead of select

src/components/LocaleSwitcher.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import CircleCheckIcon from "@/assets/icons/CircleCheckIcon.vue";
+import CircleIcon from "@/assets/icons/CircleIcon.vue";
 
 interface LocaleOption {
   code: string;
   name: string;
+  flag: string;
 }
 
 interface Props {
   modelValue: string;
+  id: string;
   locales: LocaleOption[];
 }
 
@@ -25,24 +29,62 @@ const selectModel = computed({
 </script>
 
 <template>
-  <div class="localeswitch">
+  <div class="localeselect">
-    <select v-model="selectModel">
+    <div v-for="locale in locales" class="localeselect__locale">
-      <option
+      <input
-        v-for="locale in locales"
+        type="radio"
-        :key="`locale-${locale.code}`"
+        name="lang"
+        class="localeselect__input"
+        :id="`lang-${locale.code}`"
         :value="locale.code"
-      >
+        :key="`locale-${locale.code}`"
-        {{ locale.name }}
+        v-model="selectModel"
-      </option>
+      />
-    </select>
+      <label class="localeselect__label" :for="`lang-${locale.code}`">
+        <CircleCheckIcon v-if="$i18n.locale === locale.code" />
+        <CircleIcon v-else />
+        <span>{{ locale.name }} {{ locale.flag }}</span>
+      </label>
+    </div>
   </div>
 </template>
 
 <style lang="scss">
-.localeswitch {
+.localeselect {
-  select {
+  display: flex;
-    display: block;
+  flex-flow: column nowrap;
-    margin: auto;
+  justify-content: center;
+  align-items: stretch;
+
+  margin: var(--paragraph-margin) 0;
+
+  &__locale {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__label {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+
+    svg {
+      flex: 1 0 1.25rem;
+      fill: var(--color-text);
+      transition: 0.4s;
+    }
+
+    span {
+      flex: 1 0 auto;
+      margin: 0 0 0 0.5rem;
+    }
   }
 }
 </style>