Ghost button with more/less toggle

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

const isExpanded = ref(false)
</script>

<template>
  <Button variant="ghost" @click="isExpanded = !isExpanded">
    {{ isExpanded ? "Show less" : "Show more" }}
    <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="isExpanded"
      aria-hidden="true"
      class="lucide lucide-chevron-up"
    >
      <path d="m18 15-6-6-6 6" />
    </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-chevron-down"
    >
      <path d="m6 9 6 6 6-6" />
    </svg>
  </Button>
</template>