31 lines
1.3 KiB
Vue
31 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const isClicked = ref(false)
|
|
const copyToClipBoard = () => {
|
|
navigator.clipboard
|
|
.writeText('curl -sL https://raw.githubusercontent.com/docker-web/docker-web/master/install.sh | sudo bash')
|
|
.then(() => {
|
|
isClicked.value = true
|
|
setTimeout(() => {
|
|
isClicked.value = false
|
|
}, 600)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="py-4 sm:flex justify-center items-center">
|
|
<div
|
|
class="overflow-hidden font-mono bg-neutral-900 text-neutral-50 rounded-xl flex justify-between items-center p-4 border border-transparent text-base shadow-primary-700 relative">
|
|
<span class="max-w-72 whitespace-nowrap overflow-hidden select-all"> curl -L
|
|
https://raw.githubusercontent.com/docker-web/docker-web/master/install.sh | sudo
|
|
bash </span>
|
|
<SvgClipboard class="bg-red ml-4 cursor-pointer" :class="{ 'animate-ping': isClicked }"
|
|
@click="copyToClipBoard" />
|
|
</div>
|
|
<a href="https://github.com/docker-web/docker-web" target="_blank"
|
|
class="py-4 px-6 h-14 ml-4 leading-6 flex justify-center uppercase bg-indigo-600 text-white text-lg 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>
|
|
</section>
|
|
</template>
|