Management Bar

1'use client';
2 
3import * as React from 'react';
4import {
5  ChevronLeft,
6  ChevronRight,
7  Ban,
8  X,
9  Command,
10  IdCard,
11} from 'lucide-react';
12import { SlidingNumber } from '@/components/animate-ui/primitives/texts/sliding-number';
13import { motion, type Variants, type Transition } from 'motion/react';
14 
15const TOTAL_PAGES = 10;
16 
17const BUTTON_MOTION_CONFIG = {
18  initial: 'rest',
19  whileHover: 'hover',
20  whileTap: 'tap',
21  variants: {
22    rest: { maxWidth: '40px' },
23    hover: {
24      maxWidth: '140px',
25      transition: { type: 'spring', stiffness: 200, damping: 35, delay: 0.15 },
26    },
27    tap: { scale: 0.95 },
28  },
29  transition: { type: 'spring', stiffness: 250, damping: 25 },
30} as const;
31 
32const LABEL_VARIANTS: Variants = {
33  rest: { opacity: 0, x: 4 },
34  hover: { opacity: 1, x: 0, visibility: 'visible' },
35  tap: { opacity: 1, x: 0, visibility: 'visible' },
36};
37 
38const LABEL_TRANSITION: Transition = {
39  type: 'spring',
40  stiffness: 200,
41  damping: 25,
42};
43 
44function ManagementBar() {
45  const [currentPage, setCurrentPage] = React.useState(1);
46 
47  const handlePrevPage = React.useCallback(() => {
48    if (currentPage > 1) setCurrentPage(currentPage - 1);
49  }, [currentPage]);
50 
51  const handleNextPage = React.useCallback(() => {
52    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1);
53  }, [currentPage]);
54 
55  return (
56    <div className="@container/wrapper w-full flex justify-center">
57      <div className="flex w-fit flex-col @xl/wrapper:flex-row items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg">
58        <div className="mx-auto flex flex-col @lg/wrapper:flex-row shrink-0 items-center">
59          <div className="flex h-10">
60            <button
61              disabled={currentPage === 1}
62              className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"
63              onClick={handlePrevPage}
64            >
65              <ChevronLeft size={20} />
66            </button>
67            <div className="mx-2 flex items-center space-x-1 text-sm tabular-nums">
68              <SlidingNumber
69                className="text-foreground"
70                padStart
71                number={currentPage}
72              />
73              <span className="text-muted-foreground">/ {TOTAL_PAGES}</span>
74            </div>
75            <button
76              disabled={currentPage === TOTAL_PAGES}
77// … truncated