INIT: initial commit

app/components/MoodDropdown.vue

@@ -0,0 +1,28 @@
+<template>
+  <aside class="MoodDropdown">
+    <button
+      v-for="[moodName, mood] in availableMoods"
+      :key="mood.label"
+      :style="{
+        '--background': `var(--clr-${mood.color}-light)`,
+        '--color': `var(--clr-${mood.color}-dark)`,
+      }"
+      @click="changeMood(moodName)"
+    >
+      <Icon class="icon" :name="`mingcute:${mood.icon}`" mode="svg" />
+      <span>{{ mood.label }}</span>
+    </button>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { type Mood, moods, type PossibleMood } from '../../shared/moods'
+
+const availableMoods = computed<[PossibleMood, Mood][]>(() => Object.entries(moods))
+
+const emit = defineEmits(['changeMood'])
+
+const changeMood = (newMood : PossibleMood) => {
+  emit('changeMood', newMood)
+}
+</script>