af/components/CookieMonster.vue

<template>
    <div id="cookie_monster" :class="`print:hidden z-50 ${isOpen ? 'mix-blend-normal' : 'mix-blend-difference'}`">
        <div v-if="isOpen" class="fixed bottom-2 right-2 left-2 sm:w-10/12 max-w-screen-md sm:mx-auto">
            <div class="border-2 bg-white border-sky-700 px-4 pt-3 pb-4 overflow-scroll">
                <client-only><fa-icon :icon="['fas', 'circle-xmark']" class="text-error text-4xl float-right" @click="isOpen = false" /></client-only>
                <div class="pb-4">
                    <p>I use <strong>cookies</strong> for <a href="/cookies">reasons</a>. Please read the reasons before setting your preferences.</p>
                    <div class="sm:pl-4 pt-2 grid sm:grid-cols-12 grid-cols-6">
                        <p><input type="checkbox" class="form-control toggle toggle-primary" v-model="consentStore.analytics" @change="(e: Event) => consentStore.analytics = (e.target as HTMLInputElement).checked" /></p>
                        <p class="col-span-5 sm:col-span-11"><strong>Analytics</strong>: optional, but it'd be great if you agreed 😊</p>
                    </div>
                    <div class="sm:pl-4 pt-2 grid sm:grid-cols-12 grid-cols-6">
                        <p><input type="checkbox" class="form-control toggle toggle-primary" v-model="consentStore.ads" @change="(e: Event) => consentStore.ads = (e.target as HTMLInputElement).checked" /></p>
                        <p class="col-span-5 sm:col-span-11"><strong>Advertising</strong>: fully optional, feel free to skip this one.</p>
                    </div>
                    <p class="pt-2">You can read more on how I use cookies on <a href="/cookies">this page</a>.</p>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <button class="btn btn-error" @click="rejectAll">Reject all</button>
                    <button class="btn btn-info btn-outline" @click="acceptAll">Accept all</button>
                    <button class="btn btn-success" @click="acceptMyChoice">Accept my choice</button>
                </div>
            </div>
        </div>
        <div v-else @click="isOpen = true" class="fixed max-w-0 bottom-2 sm:right-16 right-11 cursor-pointer">
            <ClientOnly><fa-icon icon="fa-solid fa-cookie-bite" class="sm:text-6xl text-4xl text-sky-500" /></ClientOnly>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useConsent } from '~~/store/consent';
const consentStore = useConsent();

const error = useError();
const isOpen = useState('isOpen', () => !consentStore.preferenceGiven && error.value === undefined);

const rejectAll = () => {
    consentStore.analytics = false;
    consentStore.ads = false;
    consentStore.preferenceGiven = true;
    isOpen.value = false;
}

const acceptAll = () => {
    consentStore.analytics = true;
    consentStore.ads = true;
    consentStore.preferenceGiven = true;
    isOpen.value = false;
}

const acceptMyChoice = () => {
    consentStore.preferenceGiven = true;
    isOpen.value = false;
}
</script>

<style lang="pcss">
#cookie_monster {
    div {
        width: 100%;
    }

    a {
        color: theme(colors.sky.700);
        text-decoration: underline;
    }
}
</style>