add event to queue button

site/src/App.vue

@@ -7,7 +7,7 @@
 			</template>
 		</v-app-bar>
 		<v-main>
-			<TheLanding />
+			<TheLanding @play="playing = !playing" />
 		</v-main>
 	</v-app>
 </template>
@@ -17,11 +17,12 @@ import {
 	useDark,
 	useToggle,
 } from '@vueuse/core';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const dark = useDark();
 const toggleDark = useToggle(dark);
+const theme = computed(() => dark.value ? 'dark' : 'light');
+const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
 
-const theme = computed(() => dark.value ? 'dark' : 'light')
+const playing = ref(false);
-const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny')
 </script>

site/src/components/TheLanding.vue

@@ -59,9 +59,17 @@
 		<v-row>
 			<v-col width="auto"></v-col>
 			<v-col cols="auto">
-				<v-btn color="primary">Play</v-btn>
+				<v-btn color="primary" @click="emit('play')">Play</v-btn>
 			</v-col>
 			<v-col width="auto"></v-col>
 		</v-row>
 	</v-container>
-</template>
+</template>
+
+<script setup lang="ts">
+type Emits = {
+	(e: 'play'): void;
+}
+
+const emit = defineEmits<Emits>();
+</script>