init: Initial Commit

services/frontend/src/components/Home.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
+import exampleFilenames from '../../constants/filenames.ts'
+import formatDictionaryAsString from '../../utils/formatting.ts'
+
+const filename = ref('')
+const code = ref(`{
+  result: 'Fill the input with the filename and click Guess'
+}`)
+
+const url = `${import.meta.env.VITE_HOST_URL}`
+
+const setRandomFilename = () => {
+    filename.value = exampleFilenames[Math.floor(Math.random() * exampleFilenames.length)];
+    getFilenameData()
+}
+
+const getFilenameData = () => {
+    const data = { 
+        filename: filename.value
+    }
+
+    axios.get(url, { params: data })
+        .then(response => {
+            code.value = formatDictionaryAsString(response.data)
+        })
+        .catch((error) => {
+            console.log(error)
+        })
+}
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-12 pb-6">
+        <div class="space-y-12 px-12">
+            <div class="flex flex-col items-center justify-center gap-4">
+                <h2 class="text-4xl font-semibold">
+                    guessit
+                </h2>
+                <p>
+                    A web app that guesses info about a video file based on its filename.
+                </p>
+            </div>
+            <div class="space-y-4 text-neutral-700">
+                <div class="text-sm flex w-full">
+                    <div class="flex-grow">
+                        <input v-model="filename" type="text" class="bg-neutral-100 p-3 rounded-l appearance-none focus:outline-none w-full shadow" placeholder="Enter the filename">
+                    </div>
+                    <button class="bg-slate-200 px-4 py-3 rounded-r shadow font-semibold hover:bg-slate-300" @click="getFilenameData">
+                        Guess
+                    </button>
+                </div>
+                <div class="flex flex-wrap justify-center text-sm gap-4">
+                    <a href="#/">
+                        <div class="bg-slate-200 rounded shadow px-4 py-2 font-semibold hover:bg-slate-300" @click="setRandomFilename">
+                            Try a random filename
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="text-left text-sm rounded px-4">
+            <highlightjs :code="code" ref="codeRef" />
+        </div>
+    </div>
+</template>