Icon-only copy button with feedback

<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

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>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <Button
          size="icon"
          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>
        </Button>
      </TooltipTrigger>
      <TooltipContent>{{ isCopied ? "Copied" : "Copy link" }}</TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>