22 lines
5.7 KiB
JSON
22 lines
5.7 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "management-bar",
|
|
"type": "registry:ui",
|
|
"title": "Management Bar",
|
|
"description": "Management Bar Component",
|
|
"dependencies": [
|
|
"motion",
|
|
"lucide-react"
|
|
],
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/sliding-number"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/ui-elements/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/text/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=\"flex w-fit flex-wrap items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg\">\n <div className=\"mx-auto flex shrink-0 items-center\">\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\n <div className=\"mx-3 h-6 w-px bg-border rounded-full\" />\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\n <div className=\"mx-3 hidden h-6 w-px bg-border sm:block rounded-full\" />\n\n <motion.button\n whileTap={{ scale: 0.975 }}\n className=\"flex w-full 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 sm: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 );\n}\n\nexport { ManagementBar };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/ui-elements/management-bar.tsx"
|
|
}
|
|
]
|
|
} |