Pagination with outline style buttons

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

const pages = [1, 2, 3, 4]
</script>

<template>
  <Pagination>
    <PaginationContent class="rounded-md gap-0 overflow-hidden border">
      <PaginationItem>
        <PaginationLink href="#" size="icon" aria-label="Go to previous page" class="border-border rounded-none border-0 border-e">
          <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-chevron-left">
            <path d="m15 18-6-6 6-6" />
          </svg>
        </PaginationLink>
      </PaginationItem>

      <PaginationItem v-for="(page, index) in pages" :key="index">
        <PaginationLink href="#" :is-active="index === 2" class="data-[active=true]:bg-muted border-border rounded-none border-0 border-e">{{ page }}</PaginationLink>
      </PaginationItem>

      <PaginationItem class="border-border border-0 border-e">
        <PaginationEllipsis />
      </PaginationItem>

      <PaginationItem>
        <PaginationLink href="#" size="icon" aria-label="Go to next page" class="rounded-none border-0">
          <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-chevron-right">
            <path d="m9 18 6-6-6-6" />
          </svg>
        </PaginationLink>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>