fix: hardcoding available templates

data/templates.json

@@ -0,0 +1,10 @@
+[
+  {
+    "language": "Custom",
+    "tags": []
+  },
+  {
+    "language": "Lithuanian",
+    "tags": ["Indo-European", "Baltic", "Full Support"]
+  }
+]

src/components/LanguageList.vue

@@ -2,6 +2,7 @@
 import { DialogClose } from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
+import { toast } from "vue-sonner";
 
 const props = defineProps<{
   isDialog: boolean;
@@ -13,38 +14,57 @@ const tagColors = new Map<string, string>([
   ["Baltic", "bg-pink-500"],
   ["Full Support", "bg-emerald-500"],
 ]);
-// TAGS OVER
 
-const languages: [string, string[]][] = [
-  ["Custom", []],
-  // START
-  ["Lithuanian", ["Indo-European", "Baltic", "Full Support"]],
-  // END
-];
+interface TemplateDetails {
+  language: string;
+  tags: string[];
+}
+
+async function getLanguages() {
+  try {
+    const response = await fetch(
+      "https://raw.githubusercontent.com/BrewingWeasel/Kalba/main/data/templates.json",
+    );
+    if (!response.ok) {
+      throw new Error(`Response status: ${response.status}`);
+    }
+
+    const json = (await response.json()) as TemplateDetails[];
+    return json;
+  } catch (error) {
+    toast.error(error as string);
+    return [];
+  }
+}
+
+const languages = await getLanguages();
 </script>
 
 <template>
   <div>
     <component
       :is="props.isDialog ? DialogClose : 'div'"
       as-child
-      v-for="[language, tags] in languages"
+      v-for="template in languages"
     >
       <div
-        @click="$emit('langSelected', language)"
+        @click="$emit('langSelected', template.language)"
         :class="
           cn(
             'flex items-center p-2 rounded-md hover:bg-accent',
-            props.existingSelection === language
+            props.existingSelection === template.language
               ? 'bg-indigo-300 dark:bg-indigo-700 hover:bg-indigo-200 dark:hover:bg-indigo-800'
               : '',
           )
         "
       >
-        <h2 class="grow">{{ language }}</h2>
-        <Badge v-for="tag in tags" class="m-1" :class="tagColors.get(tag)">{{
-          tag
-        }}</Badge>
+        <h2 class="grow">{{ template.language }}</h2>
+        <Badge
+          v-for="tag in template.tags"
+          class="m-1"
+          :class="tagColors.get(tag)"
+          >{{ tag }}</Badge
+        >
       </div>
     </component>
   </div>