20 lines
4.1 KiB
JSON
20 lines
4.1 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "notification-list",
|
|
"type": "registry:ui",
|
|
"title": "Notification List",
|
|
"description": "Notification List Component",
|
|
"dependencies": [
|
|
"motion",
|
|
"lucide-react"
|
|
],
|
|
"registryDependencies": [],
|
|
"files": [
|
|
{
|
|
"path": "registry/ui-elements/notification-list/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { RotateCcw, ArrowUpRight } from 'lucide-react';\nimport { motion, type Transition } from 'motion/react';\n\nconst notifications = [\n {\n id: 1,\n title: 'NPM Install Complete',\n subtitle: '1,227 packages added!',\n time: 'just now',\n count: 2,\n },\n {\n id: 2,\n title: 'Build Succeeded',\n subtitle: 'Build finished in 12.34s',\n time: '1m 11s',\n },\n {\n id: 3,\n title: 'Lint Passed',\n subtitle: 'No problems found',\n time: '5m',\n },\n];\n\nconst transition: Transition = {\n type: 'spring',\n stiffness: 300,\n damping: 26,\n};\n\nconst getCardVariants = (i: number) => ({\n collapsed: {\n marginTop: i === 0 ? 0 : -44,\n scaleX: 1 - i * 0.05,\n },\n expanded: {\n marginTop: i === 0 ? 0 : 4,\n scaleX: 1,\n },\n});\n\nconst textSwitchTransition: Transition = {\n duration: 0.22,\n ease: 'easeInOut',\n};\n\nconst notificationTextVariants = {\n collapsed: { opacity: 1, y: 0, pointerEvents: 'auto' },\n expanded: { opacity: 0, y: -16, pointerEvents: 'none' },\n};\n\nconst viewAllTextVariants = {\n collapsed: { opacity: 0, y: 16, pointerEvents: 'none' },\n expanded: { opacity: 1, y: 0, pointerEvents: 'auto' },\n};\n\nfunction NotificationList() {\n return (\n <motion.div\n className=\"bg-neutral-200 dark:bg-neutral-900 p-3 rounded-3xl w-xs space-y-3 shadow-md\"\n initial=\"collapsed\"\n whileHover=\"expanded\"\n >\n <div>\n {notifications.map((notification, i) => (\n <motion.div\n key={notification.id}\n className=\"bg-neutral-100 dark:bg-neutral-800 rounded-xl px-4 py-2 shadow-sm hover:shadow-lg transition-shadow duration-200 relative\"\n variants={getCardVariants(i)}\n transition={transition}\n style={{\n zIndex: notifications.length - i,\n }}\n >\n <div className=\"flex justify-between items-center\">\n <h1 className=\"text-sm font-medium\">{notification.title}</h1>\n {notification.count && (\n <div className=\"flex items-center text-xs gap-0.5 font-medium text-neutral-500 dark:text-neutral-300\">\n <RotateCcw className=\"size-3\" />\n <span>{notification.count}</span>\n </div>\n )}\n </div>\n <div className=\"text-xs text-neutral-500 font-medium\">\n <span>{notification.time}</span>\n • \n <span>{notification.subtitle}</span>\n </div>\n </motion.div>\n ))}\n </div>\n\n <div className=\"flex items-center gap-2\">\n <div className=\"size-5 rounded-full bg-neutral-400 text-white text-xs flex items-center justify-center font-medium\">\n {notifications.length}\n </div>\n <span className=\"grid\">\n <motion.span\n className=\"text-sm font-medium text-neutral-600 dark:text-neutral-300 row-start-1 col-start-1\"\n variants={notificationTextVariants}\n transition={textSwitchTransition}\n >\n Notifications\n </motion.span>\n <motion.span\n className=\"text-sm font-medium text-neutral-600 dark:text-neutral-300 flex items-center gap-1 cursor-pointer select-none row-start-1 col-start-1\"\n variants={viewAllTextVariants}\n transition={textSwitchTransition}\n >\n View all <ArrowUpRight className=\"size-4\" />\n </motion.span>\n </span>\n </div>\n </motion.div>\n );\n}\n\nexport { NotificationList };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/ui-elements/notification-list.tsx"
|
|
}
|
|
]
|
|
} |