Notification List

1'use client';
2 
3import * as React from 'react';
4import { RotateCcw, ArrowUpRight } from 'lucide-react';
5import { motion, type Transition } from 'motion/react';
6 
7const notifications = [
8  {
9    id: 1,
10    title: 'NPM Install Complete',
11    subtitle: '1,227 packages added!',
12    time: 'just now',
13    count: 2,
14  },
15  {
16    id: 2,
17    title: 'Build Succeeded',
18    subtitle: 'Build finished in 12.34s',
19    time: '1m 11s',
20  },
21  {
22    id: 3,
23    title: 'Lint Passed',
24    subtitle: 'No problems found',
25    time: '5m',
26  },
27];
28 
29const transition: Transition = {
30  type: 'spring',
31  stiffness: 300,
32  damping: 26,
33};
34 
35const getCardVariants = (i: number) => ({
36  collapsed: {
37    marginTop: i === 0 ? 0 : -44,
38    scaleX: 1 - i * 0.05,
39  },
40  expanded: {
41    marginTop: i === 0 ? 0 : 4,
42    scaleX: 1,
43  },
44});
45 
46const textSwitchTransition: Transition = {
47  duration: 0.22,
48  ease: 'easeInOut',
49};
50 
51const notificationTextVariants = {
52  collapsed: { opacity: 1, y: 0, pointerEvents: 'auto' },
53  expanded: { opacity: 0, y: -16, pointerEvents: 'none' },
54};
55 
56const viewAllTextVariants = {
57  collapsed: { opacity: 0, y: 16, pointerEvents: 'none' },
58  expanded: { opacity: 1, y: 0, pointerEvents: 'auto' },
59};
60 
61function NotificationList() {
62  return (
63    <motion.div
64      className="bg-neutral-200 dark:bg-neutral-900 p-3 rounded-3xl w-xs space-y-3 shadow-md"
65      initial="collapsed"
66      whileHover="expanded"
67    >
68      <div>
69        {notifications.map((notification, i) => (
70          <motion.div
71            key={notification.id}
72            className="bg-neutral-100 dark:bg-neutral-800 rounded-xl px-4 py-2 shadow-sm hover:shadow-lg transition-shadow duration-200 relative"
73            variants={getCardVariants(i)}
74            transition={transition}
75            style={{
76              zIndex: notifications.length - i,
77            }}
78          >
79            <div className="flex justify-between items-center">
80              <h1 className="text-sm font-medium">{notification.title}</h1>
81              {notification.count && (
82                <div className="flex items-center text-xs gap-0.5 font-medium text-neutral-500 dark:text-neutral-300">
83                  <RotateCcw className="size-3" />
84                  <span>{notification.count}</span>
85                </div>
86              )}
87            </div>
88            <div className="text-xs text-neutral-500 font-medium">
89              <span>{notification.time}</span>
90              &nbsp;•&nbsp;
91// … truncated