PronounsPage/components/AdsProviderSwitch.vue

35 lines
984 B
Vue

<script lang="ts" setup>
import { useLocalStorage } from '@vueuse/core';
const providerStorage = useLocalStorage<string | undefined | null>('ads-provider', undefined, { initOnMounted: true });
const PROVIDERS = {
'Geniee': 'geniee',
'Publift': 'publift',
'AdPushup': 'pushup',
'None': 'none',
'Reset (random)': null,
};
const setProvider = (provider: string | null) => {
providerStorage.value = provider;
setTimeout(() => {
window.location.reload();
}, 100);
};
</script>
<template>
<ul v-if="providerStorage !== undefined" class="list-inline">
<li v-for="(provider, label) in PROVIDERS" :key="label" class="list-inline-item">
<button
type="button"
:class="['btn btn-sm', providerStorage === provider ? 'btn-info' : 'btn-outline-info']"
@click="setProvider(provider)"
>
{{ label }}
</button>
</li>
</ul>
</template>