{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-community-management-bar",
  "title": "Management Bar",
  "description": "A management bar for managing items.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "@animate-ui/primitives-texts-sliding-number"
  ],
  "files": [
    {
      "path": "registry/components/community/management-bar/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Ban,\n  X,\n  Command,\n  IdCard,\n} from 'lucide-react';\nimport { SlidingNumber } from '@/components/animate-ui/primitives/texts/sliding-number';\nimport { motion, type Variants, type Transition } from 'motion/react';\n\nconst TOTAL_PAGES = 10;\n\nconst BUTTON_MOTION_CONFIG = {\n  initial: 'rest',\n  whileHover: 'hover',\n  whileTap: 'tap',\n  variants: {\n    rest: { maxWidth: '40px' },\n    hover: {\n      maxWidth: '140px',\n      transition: { type: 'spring', stiffness: 200, damping: 35, delay: 0.15 },\n    },\n    tap: { scale: 0.95 },\n  },\n  transition: { type: 'spring', stiffness: 250, damping: 25 },\n} as const;\n\nconst LABEL_VARIANTS: Variants = {\n  rest: { opacity: 0, x: 4 },\n  hover: { opacity: 1, x: 0, visibility: 'visible' },\n  tap: { opacity: 1, x: 0, visibility: 'visible' },\n};\n\nconst LABEL_TRANSITION: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 25,\n};\n\nfunction ManagementBar() {\n  const [currentPage, setCurrentPage] = React.useState(1);\n\n  const handlePrevPage = React.useCallback(() => {\n    if (currentPage > 1) setCurrentPage(currentPage - 1);\n  }, [currentPage]);\n\n  const handleNextPage = React.useCallback(() => {\n    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1);\n  }, [currentPage]);\n\n  return (\n    <div className=\"@container/wrapper w-full flex justify-center\">\n      <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\">\n        <div className=\"mx-auto flex flex-col @lg/wrapper:flex-row shrink-0 items-center\">\n          <div className=\"flex h-10\">\n            <button\n              disabled={currentPage === 1}\n              className=\"p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30\"\n              onClick={handlePrevPage}\n            >\n              <ChevronLeft size={20} />\n            </button>\n            <div className=\"mx-2 flex items-center space-x-1 text-sm tabular-nums\">\n              <SlidingNumber\n                className=\"text-foreground\"\n                padStart\n                number={currentPage}\n              />\n              <span className=\"text-muted-foreground\">/ {TOTAL_PAGES}</span>\n            </div>\n            <button\n              disabled={currentPage === TOTAL_PAGES}\n              className=\"p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30\"\n              onClick={handleNextPage}\n            >\n              <ChevronRight size={20} />\n            </button>\n          </div>\n          <div className=\"mx-3 h-6 w-px bg-border rounded-full hidden @lg/wrapper:block\" />\n\n          <motion.div\n            layout\n            layoutRoot\n            className=\"mx-auto flex flex-wrap space-x-2 sm:flex-nowrap\"\n          >\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-neutral-200/60 dark:bg-neutral-600/80 px-2.5 py-2 text-neutral-600 dark:text-neutral-200\"\n              aria-label=\"Blacklist\"\n            >\n              <Ban size={20} className=\"shrink-0\" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className=\"invisible text-sm\"\n              >\n                Blacklist\n              </motion.span>\n            </motion.button>\n\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-red-200/60 dark:bg-red-800/80 px-2.5 py-2 text-red-600 dark:text-red-300\"\n              aria-label=\"Reject\"\n            >\n              <X size={20} className=\"shrink-0\" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className=\"invisible text-sm\"\n              >\n                Reject\n              </motion.span>\n            </motion.button>\n\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-green-200/60 dark:bg-green-800/80 px-2.5 py-2 text-green-600 dark:text-green-300\"\n              aria-label=\"Hire\"\n            >\n              <IdCard size={20} className=\"shrink-0\" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className=\"invisible text-sm\"\n              >\n                Hire\n              </motion.span>\n            </motion.button>\n          </motion.div>\n        </div>\n\n        <div className=\"mx-3 hidden h-6 w-px bg-border @xl/wrapper:block rounded-full\" />\n\n        <motion.button\n          whileTap={{ scale: 0.975 }}\n          className=\"flex h-10 text-sm cursor-pointer items-center justify-center rounded-lg bg-teal-500 dark:bg-teal-600/80 px-3 py-2 text-white transition-colors duration-300 dark:hover:bg-teal-800 hover:bg-teal-600 w-full @xl/wrapper:w-auto\"\n        >\n          <span className=\"mr-1 text-neutral-200\">Move to:</span>\n          <span>Interview I</span>\n          <div className=\"mx-3 h-5 w-px bg-white/40 rounded-full\" />\n          <div className=\"flex items-center gap-1 rounded-md bg-white/20 px-1.5 py-0.5 -mr-1\">\n            <Command size={14} />E\n          </div>\n        </motion.button>\n      </div>\n    </div>\n  );\n}\n\nexport { ManagementBar };\n",
      "type": "registry:ui",
      "target": "components/animate-ui/components/community/management-bar.tsx"
    }
  ],
  "type": "registry:ui"
}