25 lines
No EOL
766 B
Vue
25 lines
No EOL
766 B
Vue
<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> |