INIT: initial commit

app/components/Sections/CurrentMood.vue

@@ -0,0 +1,25 @@
+<template>
+  <section class="CurrentMood">
+    <h1>Du bist derzeit</h1>
+    <span>{{ moods[currentMood].label }}</span>
+    <Icon class="icon" :name="`mingcute:${moods[currentMood].icon}`" mode="svg" />
+  </section>
+  <MoodDropdown
+    @change-mood="changeMood"
+  />
+</template>
+
+<script setup lang="ts">
+import { moods, type PossibleMood } from '../../../shared/moods'
+
+const currentMood = ref<PossibleMood>('happy')
+const changeMood = (newMood : PossibleMood) => {
+  currentMood.value = newMood
+  document.body.style.setProperty('--clr-current-dark', `var(--clr-${newMood}-dark)`)
+  document.body.style.setProperty('--clr-current-light', `var(--clr-${newMood}-light)`)
+}
+
+useSeoMeta({
+  title: () => `Du bist derzeit ${moods[currentMood.value].label}`
+})
+</script>