wip
This commit is contained in:
209
apps/website/components/notifications/ModalNotification.tsx
Normal file
209
apps/website/components/notifications/ModalNotification.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type { Notification, NotificationAction } from '@gridpilot/notifications/application';
|
||||
import {
|
||||
Bell,
|
||||
AlertTriangle,
|
||||
Shield,
|
||||
Vote,
|
||||
Trophy,
|
||||
Users,
|
||||
Flag,
|
||||
AlertCircle,
|
||||
Clock,
|
||||
} from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
|
||||
interface ModalNotificationProps {
|
||||
notification: Notification;
|
||||
onAction: (notification: Notification, actionId?: string) => void;
|
||||
}
|
||||
|
||||
const notificationIcons: Record<string, typeof Bell> = {
|
||||
protest_filed: AlertTriangle,
|
||||
protest_defense_requested: Shield,
|
||||
protest_vote_required: Vote,
|
||||
penalty_issued: AlertTriangle,
|
||||
race_results_posted: Trophy,
|
||||
league_invite: Users,
|
||||
race_reminder: Flag,
|
||||
};
|
||||
|
||||
const notificationColors: Record<string, { bg: string; border: string; text: string; glow: string }> = {
|
||||
protest_filed: {
|
||||
bg: 'bg-red-500/10',
|
||||
border: 'border-red-500/50',
|
||||
text: 'text-red-400',
|
||||
glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
|
||||
},
|
||||
protest_defense_requested: {
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/50',
|
||||
text: 'text-warning-amber',
|
||||
glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
|
||||
},
|
||||
protest_vote_required: {
|
||||
bg: 'bg-primary-blue/10',
|
||||
border: 'border-primary-blue/50',
|
||||
text: 'text-primary-blue',
|
||||
glow: 'shadow-[0_0_60px_rgba(25,140,255,0.3)]',
|
||||
},
|
||||
penalty_issued: {
|
||||
bg: 'bg-red-500/10',
|
||||
border: 'border-red-500/50',
|
||||
text: 'text-red-400',
|
||||
glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
|
||||
},
|
||||
};
|
||||
|
||||
export default function ModalNotification({
|
||||
notification,
|
||||
onAction,
|
||||
}: ModalNotificationProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// Animate in
|
||||
const timeout = setTimeout(() => setIsVisible(true), 10);
|
||||
return () => clearTimeout(timeout);
|
||||
}, []);
|
||||
|
||||
const handleAction = (action: NotificationAction) => {
|
||||
onAction(notification, action.actionId);
|
||||
if (action.href) {
|
||||
router.push(action.href);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrimaryAction = () => {
|
||||
onAction(notification, 'primary');
|
||||
if (notification.actionUrl) {
|
||||
router.push(notification.actionUrl);
|
||||
}
|
||||
};
|
||||
|
||||
const Icon = notificationIcons[notification.type] || AlertCircle;
|
||||
const colors = notificationColors[notification.type] || {
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/50',
|
||||
text: 'text-warning-amber',
|
||||
glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
|
||||
};
|
||||
|
||||
// Check if there's a deadline
|
||||
const deadline = notification.data?.deadline;
|
||||
const hasDeadline = deadline instanceof Date;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
fixed inset-0 z-[100] flex items-center justify-center p-4
|
||||
transition-all duration-300
|
||||
${isVisible ? 'bg-black/70 backdrop-blur-sm' : 'bg-transparent'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
w-full max-w-lg transform transition-all duration-300
|
||||
${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
rounded-2xl border-2 ${colors.border} ${colors.bg}
|
||||
backdrop-blur-md ${colors.glow}
|
||||
overflow-hidden
|
||||
`}
|
||||
>
|
||||
{/* Header with pulse animation */}
|
||||
<div className={`relative px-6 py-4 ${colors.bg} border-b ${colors.border}`}>
|
||||
{/* Animated pulse ring */}
|
||||
<div className="absolute top-4 left-6 w-12 h-12">
|
||||
<div className={`absolute inset-0 rounded-full ${colors.bg} animate-ping opacity-20`} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`relative p-3 rounded-xl ${colors.bg} border ${colors.border}`}>
|
||||
<Icon className={`w-6 h-6 ${colors.text}`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
|
||||
Action Required
|
||||
</p>
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
{notification.title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-5">
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
{notification.body}
|
||||
</p>
|
||||
|
||||
{/* Deadline warning */}
|
||||
{hasDeadline && (
|
||||
<div className="mt-4 flex items-center gap-2 px-4 py-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
|
||||
<Clock className="w-5 h-5 text-warning-amber" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-warning-amber">Response Required</p>
|
||||
<p className="text-xs text-gray-400">
|
||||
Please respond by {deadline.toLocaleDateString()} at {deadline.toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Additional context from data */}
|
||||
{notification.data?.protestId && (
|
||||
<div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
|
||||
<p className="text-xs text-gray-500 mb-1">Related Protest</p>
|
||||
<p className="text-sm text-gray-300 font-mono">
|
||||
{notification.data.protestId}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="px-6 py-4 bg-iron-gray/30 border-t border-charcoal-outline">
|
||||
{notification.actions && notification.actions.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-3 justify-end">
|
||||
{notification.actions.map((action, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={action.type === 'primary' ? 'primary' : 'secondary'}
|
||||
onClick={() => handleAction(action)}
|
||||
className={action.type === 'danger' ? 'bg-red-500 hover:bg-red-600 text-white' : ''}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-end">
|
||||
<Button variant="primary" onClick={handlePrimaryAction}>
|
||||
{notification.actionUrl ? 'View Details' : 'Acknowledge'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Cannot dismiss warning */}
|
||||
{notification.requiresResponse && (
|
||||
<div className="px-6 py-2 bg-red-500/10 border-t border-red-500/20">
|
||||
<p className="text-xs text-red-400 text-center">
|
||||
⚠️ This notification requires your action and cannot be dismissed
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user