Files
docker-website/components/hero-buttons.vue
2023-06-03 11:43:19 +02:00

36 lines
1.2 KiB
Vue

<script setup lang="ts">
const isClicked = ref(false)
const copyToClipBoard = () => {
navigator.clipboard
.writeText('curl -sL get.pegaz.dev | sudo bash')
.then(() => {
isClicked.value = true
setTimeout(() => {
isClicked.value = false
}, 600)
})
}
</script>
<template>
<section class="py-4 sm:flex justify-center items-center">
<a
href="https://github.com/valerebron/pegaz"
target="_blank"
class="py-4 px-6 h-14 leading-6 flex justify-center bg-indigo-600 text-white text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all"
>
get started
</a>
<div
class="font-mono bg-neutral-900 text-neutral-50 rounded-xl flex justify-between items-center pl-3 pr-4 py-4 sm:ml-4 border border-transparent text-base shadow-primary-700 relative"
>
<span class="select-all"> curl -L get.pegaz.dev | sudo bash </span>
<SvgClipboard
class="ml-3 cursor-pointer"
:class="{ 'animate-ping': isClicked }"
@click="copyToClipBoard"
/>
</div>
</section>
</template>