"use client"; import * as React from "react"; import { ChevronLeft, ChevronRight, Ban, X, Command, IdCard, } from "lucide-react"; import { SlidingNumber } from "@/components/animate-ui/text/sliding-number"; import { motion, Variants, Transition } from "motion/react"; const TOTAL_PAGES = 10; const BUTTON_MOTION_CONFIG = { initial: "rest", whileHover: "hover", whileTap: "tap", variants: { rest: { maxWidth: "40px" }, hover: { maxWidth: "140px", transition: { type: "spring", stiffness: 200, damping: 35, delay: 0.15 }, }, tap: { scale: 0.95 }, }, transition: { type: "spring", stiffness: 250, damping: 25 }, }; const LABEL_VARIANTS: Variants = { rest: { opacity: 0, x: 4 }, hover: { opacity: 1, x: 0, visibility: "visible" }, tap: { opacity: 1, x: 0, visibility: "visible" }, }; const LABEL_TRANSITION: Transition = { type: "spring", stiffness: 200, damping: 25, }; function ManagementBar() { const [currentPage, setCurrentPage] = React.useState(1); const handlePrevPage = React.useCallback(() => { if (currentPage > 1) setCurrentPage(currentPage - 1); }, [currentPage]); const handleNextPage = React.useCallback(() => { if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1); }, [currentPage]); return (

/ {TOTAL_PAGES}

Blacklist Reject Hire

Move to: Interview I

); } export { ManagementBar };

Animate UI

Management Bar

Installation

Examples