starting show category

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 	import Summary from './components/summary.vue'
 	import MinsLeftToPracticeToday from './components/mins_left_to_practice_today.vue'
+	import ShowCategory from './components/show_category.vue'
 </script>
 
 <template>
@@ -10,6 +11,7 @@
 	<main>
 		<MinsLeftToPracticeToday/>
 		<Summary/>
+		<ShowCategory/>
 	</main>
 </template>
 

src/components/show_category.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import axios from 'axios';
+
+	export default {
+		data() {
+			return {
+				categories:[]
+			}
+		},
+		mounted() {
+			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
+				this.categories = response.data
+			})
+		}
+	}
+</script>
+
+<template>
+	<h2>Show Category</h2>
+	<select>
+		<option v-for="category in categories" v-bind:value="category.id">
+			{{category.instrument}}
+			:
+			{{category.category}}
+		</option>
+	</select>
+</template>
+
+<style scoped>
+td {
+	border:1px solid black;
+	padding:1em;
+}
+</style>