nimuli/resources/views/components/ui/copy-button.blade.php

32 lines
1.4 KiB
PHP

@props(['value', 'label' => 'Kopieren'])
<button
type="button"
x-data="{ copied: false }"
@click="navigator.clipboard.writeText(@js($value)).then(() => { copied = true; setTimeout(() => copied = false, 1500); }).catch(() => {
var ta = document.createElement('textarea');
ta.value = @js($value);
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
copied = true;
setTimeout(() => copied = false, 1500);
})"
:class="copied ? 'text-green-400' : 'text-t2 hover:text-t1'"
class="inline-flex items-center gap-1 text-xs transition-colors"
>
<span x-show="!copied" class="flex items-center gap-1">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
<rect x="5" y="5" width="8" height="8" rx="1"/><path stroke-linecap="round" stroke-linejoin="round" d="M11 5V3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h2"/>
</svg>
<span>{{ $label }}</span>
</span>
<span x-show="copied" class="flex items-center gap-1">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l3 3 7-7"/>
</svg>
<span>Kopiert</span>
</span>
</button>