Attachment button group with download action

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

const attachment = {
  name: "Q4-Product-Roadmap.pdf",
  size: "2.4 MB",
}
</script>

<template>
  <ButtonGroup>
    <Button variant="outline" size="xs">
      <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"
        aria-hidden="true"
        class="lucide lucide-paperclip"
      >
        <path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" />
      </svg>
      {{ attachment.name }}
      <span class="opacity-60">({{ attachment.size }})</span>
    </Button>
    <Button variant="outline" size="icon-xs" aria-label="Download attachment">
      <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"
        aria-hidden="true"
        class="lucide lucide-download"
      >
        <path d="M12 15V3" />
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
        <path d="m7 10 5 5 5-5" />
      </svg>
    </Button>
  </ButtonGroup>
</template>