Copy button with feedback

<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"

const isCopied = ref(false)

function copyToClipboard() {
  if (typeof window === "undefined" || !navigator.clipboard?.writeText) return

  const value = "https://reui.io"
  if (!value) return

  navigator.clipboard.writeText(value).then(() => {
    isCopied.value = true
    setTimeout(() => {
      isCopied.value = false
    }, 1500)
  }, console.error)
}
</script>

<template>
  <Button
    variant="outline"
    :aria-label="isCopied ? 'Copied' : 'Copy'"
    @click="copyToClipboard()"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      v-if="isCopied"
      aria-hidden="true"
      class="lucide lucide-check"
    >
      <path d="M20 6 9 17l-5-5" />
    </svg>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      v-else
      aria-hidden="true"
      class="lucide lucide-copy"
    >
      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>
    <span>{{ isCopied ? "Copied" : "Copy" }}</span>
  </Button>
</template>