starting timer

src/App.vue

@@ -3,6 +3,7 @@
 	import MinsLeftToPracticeToday from './components/mins_left_to_practice_today.vue'
 	import ShowCategory from './components/show_category.vue'
 	import Songs from './components/songs.vue'
+	import Timer from './components/timer.vue'
 </script>
 
 <template>
@@ -11,6 +12,7 @@
 	</header>
 	<main>
 		<MinsLeftToPracticeToday/>
+		<Timer/>
 		<Summary/>
 		<ShowCategory/>
 		<Songs/>

src/components/timer.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import axios from 'axios';
+	export default {
+		data() {
+			return {
+				categories:[]
+			}
+		},
+		methods: {
+			submit(event){
+				event.preventDefault();
+				console.log('hi');
+			}
+		},
+		mounted() {
+			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
+				this.categories = response.data
+			})
+		}
+	}
+</script>
+
+<template>
+	<details>
+		<summary><h2>Timer</h2></summary>
+		<form @submit="submit">
+			<label>Description</label>
+			<input type="text"/>
+
+			<label>Seconds</label>
+			<input type="number"/>
+
+			<label>Comments</label>
+			<textarea/>
+
+			<label>Practice Category</label>
+			<select>
+				<option v-for="category in categories" v-bind:value="category.id">
+					{{category.id}}.
+					{{category.instrument}}
+					:
+					{{category.category}}
+				</option>
+			</select>
+
+			<input type="Submit"/>
+		</form>
+	</details>
+</template>
+
+<style scoped>
+label, [type="submit"] {
+	display:block;
+}
+</style>