From ae6286852f3724e73b0546a7a0c1058d4b64b12d Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Wed, 15 Mar 2023 19:24:55 -0400
Subject: [PATCH] starting show category

---
 src/App.vue                      |  2 ++
 src/components/show_category.vue | 34 ++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/show_category.vue

diff --git a/src/App.vue b/src/App.vue
index 4c92070..99dab31 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/components/show_category.vue b/src/components/show_category.vue
new file mode 100644
index 0000000..9a2809f
--- /dev/null
+++ b/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>