Animated Pagination

1"use client";
2 
3import { motion } from "framer-motion";
4import { ChevronLeft, ChevronRight } from "lucide-react";
5import { useState } from "react";
6 
7export function AnimatedPagination() {
8  const [currentPage, setCurrentPage] = useState(1);
9  const totalPages = 5;
10 
11  return (
12    <div className="flex items-center gap-2">
13      <motion.button
14        onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
15        disabled={currentPage === 1}
16        className="flex h-9 w-9 items-center justify-center rounded-lg border  disabled:opacity-50"
17        whileHover={{ scale: 1.05 }}
18        whileTap={{ scale: 0.95 }}
19      >
20        <ChevronLeft className="h-4 w-4" />
21      </motion.button>
22 
23      {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
24        <motion.button
25          key={page}
26          onClick={() => setCurrentPage(page)}
27          className="relative h-9 w-9 rounded-lg text-sm font-medium"
28          whileHover={{ scale: 1.05 }}
29          whileTap={{ scale: 0.95 }}
30          style={{
31            color: currentPage === page ? "white" : "var(--foreground)",
32          }}
33        >
34          {currentPage === page && (
35            <motion.div
36              layoutId="pagination-indicator"
37              className="absolute inset-0 rounded-lg bg-accent"
38              transition={{ type: "spring", stiffness: 380, damping: 30 }}
39            />
40          )}
41          <span className="relative z-10">{page}</span>
42        </motion.button>
43      ))}
44 
45      <motion.button
46        onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
47        disabled={currentPage === totalPages}
48        className="flex h-9 w-9 items-center justify-center rounded-lg border  disabled:opacity-50"
49        whileHover={{ scale: 1.05 }}
50        whileTap={{ scale: 0.95 }}
51      >
52        <ChevronRight className="h-4 w-4" />
53      </motion.button>
54    </div>
55  );
56}