64 lines
2.8 KiB
TypeScript
64 lines
2.8 KiB
TypeScript
import { ClockIcon } from '@heroicons/react/24/outline';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface NotificationsPanelProps {
|
|
notificationItems: Array<{
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
time: string;
|
|
isUnread: boolean;
|
|
}>;
|
|
}
|
|
|
|
export function NotificationsPanel({ notificationItems }: NotificationsPanelProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"
|
|
>
|
|
<div className="p-4 border-b border-gray-100">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-gray-900">Notifications</h3>
|
|
<span className="text-sm text-primary-600 hover:text-blue-700 cursor-pointer">
|
|
Mark all as read
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-h-[400px] overflow-y-auto overflow-x-hidden">
|
|
{notificationItems.map((item, index) => (
|
|
<motion.div
|
|
key={index}
|
|
whileHover={{ x: 4 }}
|
|
className={`p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors ${item.isUnread ? 'bg-blue-50/50' : ''
|
|
}`}
|
|
>
|
|
<div className="flex gap-3">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
|
|
{item.icon}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="text-sm font-medium text-gray-900">{item.title}</h4>
|
|
<p className="text-sm text-gray-600 mt-1">{item.description}</p>
|
|
<div className="flex items-center gap-1 mt-2 text-xs text-tertiary-300">
|
|
<ClockIcon className='h-4 w-4'></ClockIcon>
|
|
<span>{item.time}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-gray-100 bg-gray-50">
|
|
<button className="w-full text-sm text-center text-primary-600 hover:text-blue-700">
|
|
View all notifications
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
} |