Toggle group for text alignment

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "text-align-start"/"text-align-center"/
  "text-align-end"/"menu", он же "align-left"/"align-center"/"align-right") —
  см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
</script>

<template>
  <div class="flex items-center justify-center">
    <ToggleGroup type="single" default-value="left" :spacing="1">
      <ToggleGroupItem value="left" 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>
      </ToggleGroupItem>
      <ToggleGroupItem value="center" 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>
      </ToggleGroupItem>
      <ToggleGroupItem value="right" 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>
      </ToggleGroupItem>
      <ToggleGroupItem value="justify" aria-label="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>
      </ToggleGroupItem>
    </ToggleGroup>
  </div>
</template>