Pagination with arrows buttons

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "arrow-left"/"arrow-right") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Pagination, PaginationContent, PaginationItem, PaginationLink } from "@/components/ui/pagination"
</script>

<template>
  <Pagination class="w-full max-w-xs">
    <PaginationContent class="w-full justify-between">
      <PaginationItem>
        <PaginationLink href="#" size="default" class="gap-2">
          <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-left size-4">
            <path d="m12 19-7-7 7-7" />
            <path d="M19 12H5" />
          </svg>
          Previous
        </PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" size="default" class="gap-2">
          Next
          <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-right size-4">
            <path d="M5 12h14" />
            <path d="m12 5 7 7-7 7" />
          </svg>
        </PaginationLink>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>