Toggle group for sort direction

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "arrow-up"/"arrow-down") — см. 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="asc" variant="outline" size="sm">
      <ToggleGroupItem value="asc" aria-label="Sort ascending">
        <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-arrow-up">
          <path d="m5 12 7-7 7 7" />
          <path d="M12 19V5" />
        </svg>
        Ascending
      </ToggleGroupItem>
      <ToggleGroupItem value="desc" aria-label="Sort descending">
        <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-arrow-down">
          <path d="M12 5v14" />
          <path d="m19 12-7 7-7-7" />
        </svg>
        Descending
      </ToggleGroupItem>
    </ToggleGroup>
  </div>
</template>