Pagination with hover effect.

<script setup lang="ts">
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"
</script>

<template>
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious href="#" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" class="hover:border-border hover:border!">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" :is-active="true">2</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" class="hover:border-border hover:border!">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>