mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-13 11:43:09 +01:00
parent 4b6fc668b5
commit bb0497f429
38 changed files with 3838 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
apps/website/components/notifications/ModalNotification.tsx
View File

@@ -13,12 +13,20 @@ import {
Flag,
AlertCircle,
Clock,
TrendingUp,
Award,
Star,
Medal,
Target,
Zap,
X,
} from 'lucide-react';
import Button from '@/components/ui/Button';
interface ModalNotificationProps {
notification: Notification;
onAction: (notification: Notification, actionId?: string) => void;
onDismiss?: (notification: Notification) => void;
}
const notificationIcons: Record<string, typeof Bell> = {
@@ -27,6 +35,8 @@ const notificationIcons: Record<string, typeof Bell> = {
protest_vote_required: Vote,
penalty_issued: AlertTriangle,
race_results_posted: Trophy,
race_performance_summary: Medal,
race_final_results: Star,
league_invite: Users,
race_reminder: Flag,
};
@@ -50,17 +60,30 @@ const notificationColors: Record<string, { bg: string; border: string; text: str
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',
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)]',
},
race_performance_summary: {
bg: 'bg-gradient-to-br from-yellow-400/20 via-orange-500/20 to-red-500/20',
border: 'border-yellow-400/60',
text: 'text-yellow-400',
glow: 'shadow-[0_0_80px_rgba(251,191,36,0.4)]',
},
race_final_results: {
bg: 'bg-gradient-to-br from-purple-500/20 via-pink-500/20 to-indigo-500/20',
border: 'border-purple-400/60',
text: 'text-purple-400',
glow: 'shadow-[0_0_80px_rgba(168,85,247,0.4)]',
},
};
export default function ModalNotification({
notification,
onAction,
onDismiss,
}: ModalNotificationProps) {
const [isVisible, setIsVisible] = useState(false);
const router = useRouter();
@@ -71,6 +94,18 @@ export default function ModalNotification({
return () => clearTimeout(timeout);
}, []);
// Handle ESC key to dismiss
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape' && onDismiss && !notification.requiresResponse) {
onDismiss(notification);
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [notification, onDismiss]);
const handleAction = (action: NotificationAction) => {
onAction(notification, action.actionId);
if (action.href) {
@@ -97,18 +132,25 @@ export default function ModalNotification({
const deadline = notification.data?.deadline;
const hasDeadline = deadline instanceof Date;
// Special celebratory styling for race notifications
const isRaceNotification = notification.type.startsWith('race_');
const isPerformanceSummary = notification.type === 'race_performance_summary';
const isFinalResults = notification.type === 'race_final_results';
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'}
${isRaceNotification ? 'bg-gradient-to-br from-black/80 via-indigo-900/10 to-black/80' : ''}
`}
>
<div
className={`
w-full max-w-lg transform transition-all duration-300
${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}
${isRaceNotification ? '' : ''}
`}
>
<div
@@ -116,38 +158,71 @@ export default function ModalNotification({
rounded-2xl border-2 ${colors.border} ${colors.bg}
backdrop-blur-md ${colors.glow}
overflow-hidden
${isRaceNotification ? 'relative' : ''}
`}
>
{/* Header with pulse animation */}
<div className={`relative px-6 py-4 ${colors.bg} border-b ${colors.border}`}>
{/* Animated pulse ring */}
<div className={`relative px-6 py-4 ${colors.bg} border-b ${colors.border} ${isRaceNotification ? 'bg-gradient-to-r from-transparent via-yellow-500/10 to-transparent' : ''}`}>
{/* Subtle 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 className={`absolute inset-0 rounded-full ${colors.bg} opacity-10`} />
</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 className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className={`relative p-3 rounded-xl ${colors.bg} border ${colors.border} ${isRaceNotification ? 'shadow-lg' : ''}`}>
<Icon className={`w-6 h-6 ${colors.text}`} />
</div>
<div>
<p className={`text-xs font-semibold uppercase tracking-wide ${isRaceNotification ? 'text-yellow-400' : 'text-gray-400'}`}>
{isRaceNotification ? (isPerformanceSummary ? '🏁 Race Complete!' : '🏆 Championship Update') : 'Action Required'}
</p>
<h2 className={`text-xl font-bold ${isRaceNotification ? 'text-white' : 'text-white'}`}>
{notification.title}
</h2>
</div>
</div>
{/* X button for dismissible notifications */}
{onDismiss && !notification.requiresResponse && (
<button
onClick={() => onDismiss(notification)}
className="p-2 rounded-full hover:bg-white/10 transition-colors"
aria-label="Dismiss notification"
>
<X className="w-5 h-5 text-gray-400 hover:text-white" />
</button>
)}
</div>
</div>
{/* Body */}
<div className="px-6 py-5">
<p className="text-gray-300 leading-relaxed">
<div className={`px-6 py-5 ${isRaceNotification ? 'bg-gradient-to-b from-transparent to-yellow-500/5' : ''}`}>
<p className={`leading-relaxed ${isRaceNotification ? 'text-white text-lg font-medium' : 'text-gray-300'}`}>
{notification.body}
</p>
{/* Race performance stats */}
{isRaceNotification && (
<div className="mt-4 grid grid-cols-2 gap-3">
<div className="bg-black/20 rounded-lg p-3 border border-yellow-400/20">
<div className="text-xs text-yellow-300 font-medium mb-1">POSITION</div>
<div className="text-2xl font-bold text-white">
{notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`}
</div>
</div>
<div className="bg-black/20 rounded-lg p-3 border border-yellow-400/20">
<div className="text-xs text-yellow-300 font-medium mb-1">RATING CHANGE</div>
<div className={`text-2xl font-bold ${(notification.data?.provisionalRatingChange || notification.data?.finalRatingChange || 0) >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{(notification.data?.provisionalRatingChange || notification.data?.finalRatingChange || 0) >= 0 ? '+' : ''}
{notification.data?.provisionalRatingChange || notification.data?.finalRatingChange || 0}
</div>
</div>
</div>
)}
{/* Deadline warning */}
{hasDeadline && (
{hasDeadline && !isRaceNotification && (
<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>
@@ -168,10 +243,11 @@ export default function ModalNotification({
</p>
</div>
)}
</div>
{/* Actions */}
<div className="px-6 py-4 bg-iron-gray/30 border-t border-charcoal-outline">
<div className={`px-6 py-4 border-t ${isRaceNotification ? (isPerformanceSummary ? 'border-yellow-400/60 bg-gradient-to-r from-yellow-500/10 to-orange-500/10' : 'border-purple-400/60 bg-gradient-to-r from-purple-500/10 to-pink-500/10') : 'border-charcoal-outline bg-iron-gray/30'}`}>
{notification.actions && notification.actions.length > 0 ? (
<div className="flex flex-wrap gap-3 justify-end">
{notification.actions.map((action, index) => (
@@ -179,23 +255,48 @@ export default function ModalNotification({
key={index}
variant={action.type === 'primary' ? 'primary' : 'secondary'}
onClick={() => handleAction(action)}
className={action.type === 'danger' ? 'bg-red-500 hover:bg-red-600 text-white' : ''}
className={`${action.type === 'danger' ? 'bg-red-500 hover:bg-red-600 text-white' : ''} ${isRaceNotification ? 'shadow-lg hover:shadow-yellow-400/30' : ''}`}
>
{action.label}
</Button>
))}
</div>
) : (
<div className="flex justify-end">
<Button variant="primary" onClick={handlePrimaryAction}>
{notification.actionUrl ? 'View Details' : 'Acknowledge'}
</Button>
<div className="flex flex-wrap gap-3 justify-end">
{isRaceNotification ? (
<>
<Button
variant="secondary"
onClick={() => onDismiss ? onDismiss(notification) : handleAction(notification, 'dismiss')}
className="shadow-lg hover:shadow-yellow-400/30"
>
Dismiss
</Button>
<Button
variant="secondary"
onClick={() => handleAction({ label: 'Share Achievement', type: 'secondary', actionId: 'share' })}
className="shadow-lg hover:shadow-yellow-400/30"
>
🎉 Share
</Button>
<Button
variant={isPerformanceSummary ? 'race-performance' : 'race-final'}
onClick={handlePrimaryAction}
>
{isPerformanceSummary ? '🏁 View Race Results' : '🏆 View Standings'}
</Button>
</>
) : (
<Button variant="primary" onClick={handlePrimaryAction}>
{notification.actionUrl ? 'View Details' : 'Acknowledge'}
</Button>
)}
</div>
)}
</div>
{/* Cannot dismiss warning */}
{notification.requiresResponse && (
{notification.requiresResponse && !isRaceNotification && (
<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