mirror of
https://github.com/andatoshiki/toshiki-home-nuxt3.git
synced 2026-06-06 01:06:27 +00:00
61 lines
1.9 KiB
Vue
Executable File
61 lines
1.9 KiB
Vue
Executable File
<script lang="ts">
|
|
import Vue from 'vue'
|
|
|
|
export default Vue.extend({
|
|
data() {
|
|
return {
|
|
viewed: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.viewed = Boolean(localStorage.getItem('sponsor-popup-viewed')) || false
|
|
},
|
|
methods: {
|
|
dismissMessage() {
|
|
localStorage.setItem('sponsor-popup-viewed', 'true')
|
|
this.viewed = true
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade" mode="out-in">
|
|
<div
|
|
v-if="viewed === false"
|
|
class="fixed inset-x-0 w-11/12 p-4 mx-auto space-y-1 rounded-lg shadow-md select-none bottom-4 lg:w-1/4 ring-1 ring-white/10 dark:ring-white/20 ring-black/20 lg:mx-0 lg:left-4 background-when-supports z-20"
|
|
>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<SmartLink href="https://github.com/sponsors/andatoshiki" blank @click.native="dismissMessage">
|
|
<h3 class="font-medium leading-tight dark:text-white">
|
|
💖 Consider sponsoring via cryptocurrency!
|
|
</h3>
|
|
</SmartLink>
|
|
|
|
<button
|
|
class="p-1 transition-colors rounded-full hover:bg-black/20 dark:hover:bg-white/20 bg-black/10 dark:bg-white/10 dark:text-white"
|
|
@click="dismissMessage"
|
|
>
|
|
<IconX class="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
|
|
<p class="text-sm light:opacity-50 dark:text-white/50">
|
|
Donation is always considered as the best mean of sponsoring to worthy causes and initiatives
|
|
</p>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.background-when-supports {
|
|
@apply backdrop-blur-md backdrop-filter dark:bg-neutral-900;
|
|
}
|
|
|
|
@supports (backdrop-filter: blur()) {
|
|
.background-when-supports {
|
|
@apply backdrop-blur-md backdrop-filter dark:bg-neutral-800/10;
|
|
}
|
|
}
|
|
</style>
|