mailwolt/resources/views/components/button/copy-btn.blade.php

26 lines
819 B
PHP

@props([
'text' => '',
'class' => '',
'label' => '',
])
<button
x-data="{ copied: false }"
@click="
navigator.clipboard.writeText(@js($text));
copied = true;
setTimeout(() => copied = false, 2000);
"
class="inline-flex items-center text-base gap-1.5 rounded-lg border border-white/10 bg-white/5 p-1 #py-1 text-white/80 hover:text-white hover:border-white/20 transition {{ $class }}"
>
<template x-if="!copied">
<span class="inline-flex items-center">
<i class="ph ph-copy"></i> <small>{{ $label }}</small>
</span>
</template>
<template x-if="copied">
<span class="inline-flex items-center">
<i class="ph ph-checks text-emerald-400"></i> <small>{{ $label }}</small>
</span>
</template>
</button>