Button group for editor text alignment controls

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

<template>
  <ButtonGroup>
    <Button variant="outline" size="icon-sm" aria-label="Align left">
      <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-align-left"
      >
        <path d="M21 5H3" />
        <path d="M15 12H3" />
        <path d="M17 19H3" />
      </svg>
    </Button>
    <Button variant="outline" size="icon-sm" aria-label="Align center">
      <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-align-center"
      >
        <path d="M21 5H3" />
        <path d="M17 12H7" />
        <path d="M19 19H5" />
      </svg>
    </Button>
    <Button variant="outline" size="icon-sm" aria-label="Align right">
      <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-align-right"
      >
        <path d="M21 5H3" />
        <path d="M21 12H9" />
        <path d="M21 19H7" />
      </svg>
    </Button>
    <Button variant="outline" size="icon-sm" aria-label="Align justify">
      <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-menu"
      >
        <path d="M4 5h16" />
        <path d="M4 12h16" />
        <path d="M4 19h16" />
      </svg>
    </Button>
  </ButtonGroup>
</template>