songs section

src/App.vue

@@ -2,6 +2,7 @@
 	import Summary from './components/summary.vue'
 	import MinsLeftToPracticeToday from './components/mins_left_to_practice_today.vue'
 	import ShowCategory from './components/show_category.vue'
+	import Songs from './components/songs.vue'
 </script>
 
 <template>
@@ -12,6 +13,7 @@
 		<MinsLeftToPracticeToday/>
 		<Summary/>
 		<ShowCategory/>
+		<Songs/>
 	</main>
 </template>
 

src/components/songs.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import axios from 'axios';
+
+	export default {
+		data() {
+			return {
+				songs:[]
+			}
+		},
+		mounted() {
+			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'songs').then((response)=>{
+				this.songs = response.data
+			})
+		}
+	}
+</script>
+
+<template>
+	<details>
+		<summary><h2>Songs</h2></summary>
+		<table>
+			<thead>
+				<tr>
+					<th>id</th>
+					<th>title</th>
+					<th>notes</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="song in songs">
+					<td>{{song.id}}</td>
+					<td>{{song.title}}</td>
+					<td>{{song.notes}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</details>
+</template>
+
+<style scoped>
+</style>