53 lines
2.9 KiB
Vue
53 lines
2.9 KiB
Vue
<template>
|
|
<div class="relative bg-white font-roboto">
|
|
<Nuxt />
|
|
|
|
<transition
|
|
leave-active-class="transition duration-300 ease-in transform"
|
|
leave-class="translate-x-0 opacity-100"
|
|
leave-to-class="translate-x-20 opacity-0"
|
|
>
|
|
<div v-show="byMeCoffee" class="fixed inset-x-0 lg:inset-x-auto bottom-6 lg:right-8 xl:right-10 xl:bottom-8">
|
|
<div class="lg:w-[24rem] px-6 lg:px-0">
|
|
<div class="p-2 bg-blue-600 rounded-lg shadow-lg sm:p-3">
|
|
<div class="flex flex-wrap items-center justify-between">
|
|
<a target="_blank" href="https://www.buymeacoffee.com/khatabwedaa/e/54228" class="flex items-center flex-1 w-0">
|
|
<span class="flex p-2 bg-blue-800 rounded-lg">
|
|
<!-- Heroicon name: outline/speakerphone -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z" />
|
|
</svg>
|
|
</span>
|
|
|
|
<p class="ml-3 font-medium tracking-wide text-white truncate">
|
|
Support Meraki UI
|
|
</p>
|
|
</a>
|
|
|
|
<div class="flex-shrink-0 order-2 sm:order-3 sm:ml-2">
|
|
<button @click="byMeCoffee = false" type="button" class="flex p-2 -mr-1 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-white">
|
|
<span class="sr-only">Dismiss</span>
|
|
<!-- Heroicon name: outline/x -->
|
|
<svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
byMeCoffee: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|