website refactor
This commit is contained in:
@@ -1,11 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { IconButton } from '@/ui/IconButton';
|
||||
import { Box } from '@/ui/primitives/Box';
|
||||
import { Modal } from '@/ui/Modal';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { NotificationStat, NotificationDeadline } from '@/ui/NotificationContent';
|
||||
import {
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
@@ -18,9 +17,8 @@ import {
|
||||
Trophy,
|
||||
Users,
|
||||
Vote,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import React from 'react';
|
||||
import type { Notification, NotificationAction } from './notificationTypes';
|
||||
|
||||
interface ModalNotificationProps {
|
||||
@@ -42,71 +40,12 @@ const notificationIcons: Record<string, typeof Bell> = {
|
||||
race_reminder: Flag,
|
||||
};
|
||||
|
||||
const notificationColors: Record<string, { bg: string; border: string; text: string; glow: string }> = {
|
||||
protest_filed: {
|
||||
bg: 'bg-critical-red/10',
|
||||
border: 'border-critical-red/50',
|
||||
text: 'text-critical-red',
|
||||
glow: 'shadow-[0_0_60px_rgba(227,92,92,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(255,197,86,0.3)]',
|
||||
},
|
||||
protest_vote_required: {
|
||||
bg: 'bg-primary-accent/10',
|
||||
border: 'border-primary-accent/50',
|
||||
text: 'text-primary-accent',
|
||||
glow: 'shadow-[0_0_60px_rgba(25,140,255,0.3)]',
|
||||
},
|
||||
penalty_issued: {
|
||||
bg: 'bg-critical-red/10',
|
||||
border: 'border-critical-red/50',
|
||||
text: 'text-critical-red',
|
||||
glow: 'shadow-[0_0_60px_rgba(227,92,92,0.3)]',
|
||||
},
|
||||
race_performance_summary: {
|
||||
bg: 'bg-panel-gray',
|
||||
border: 'border-warning-amber/60',
|
||||
text: 'text-warning-amber',
|
||||
glow: 'shadow-[0_0_80px_rgba(255,197,86,0.2)]',
|
||||
},
|
||||
race_final_results: {
|
||||
bg: 'bg-panel-gray',
|
||||
border: 'border-primary-accent/60',
|
||||
text: 'text-primary-accent',
|
||||
glow: 'shadow-[0_0_80px_rgba(25,140,255,0.2)]',
|
||||
},
|
||||
};
|
||||
|
||||
export function ModalNotification({
|
||||
notification,
|
||||
onAction,
|
||||
onDismiss,
|
||||
onNavigate,
|
||||
}: ModalNotificationProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Animate in
|
||||
const timeout = setTimeout(() => setIsVisible(true), 10);
|
||||
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.id);
|
||||
if (action.href && onNavigate) {
|
||||
@@ -122,13 +61,6 @@ export function ModalNotification({
|
||||
};
|
||||
|
||||
const NotificationIcon = notificationIcons[notification.type] || AlertCircle;
|
||||
const colors = notificationColors[notification.type] || {
|
||||
bg: 'bg-panel-gray',
|
||||
border: 'border-border-gray',
|
||||
text: 'text-gray-400',
|
||||
glow: 'shadow-card',
|
||||
};
|
||||
|
||||
const data: Record<string, unknown> = notification.data ?? {};
|
||||
|
||||
const getNumber = (value: unknown): number | null => {
|
||||
@@ -148,7 +80,6 @@ export function ModalNotification({
|
||||
|
||||
const isValidDate = (value: unknown): value is Date => value instanceof Date && !Number.isNaN(value.getTime());
|
||||
|
||||
// Check if there's a deadline
|
||||
const deadlineValue = data.deadline;
|
||||
const deadline: Date | null =
|
||||
isValidDate(deadlineValue)
|
||||
@@ -158,200 +89,96 @@ export function ModalNotification({
|
||||
: null;
|
||||
const hasDeadline = !!deadline && !Number.isNaN(deadline.getTime());
|
||||
|
||||
// Special celebratory styling for race notifications
|
||||
const isRaceNotification = notification.type.startsWith('race_');
|
||||
|
||||
const provisionalRatingChange = getNumber(data.provisionalRatingChange) ?? 0;
|
||||
const finalRatingChange = getNumber(data.finalRatingChange) ?? 0;
|
||||
const ratingChange = provisionalRatingChange || finalRatingChange;
|
||||
const protestId = getString(data.protestId);
|
||||
|
||||
return (
|
||||
<Box
|
||||
position="fixed"
|
||||
inset="0"
|
||||
zIndex={100}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
p={4}
|
||||
transition
|
||||
bg={isVisible ? 'bg-black/80' : 'bg-transparent'}
|
||||
className={isVisible ? 'backdrop-blur-sm' : ''}
|
||||
>
|
||||
<Box
|
||||
w="full"
|
||||
maxWidth="lg"
|
||||
transform
|
||||
transition
|
||||
opacity={isVisible ? 1 : 0}
|
||||
className={isVisible ? 'scale-100' : 'scale-95'}
|
||||
>
|
||||
<Box
|
||||
rounded="sm"
|
||||
border
|
||||
borderColor={colors.border}
|
||||
bg="panel-gray"
|
||||
shadow={colors.glow}
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* Header */}
|
||||
<Box
|
||||
px={6}
|
||||
py={4}
|
||||
bg="graphite-black"
|
||||
borderBottom
|
||||
borderColor={colors.border}
|
||||
>
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Box
|
||||
p={2}
|
||||
rounded="sm"
|
||||
bg="panel-gray"
|
||||
border
|
||||
borderColor={colors.border}
|
||||
<Modal
|
||||
isOpen={true}
|
||||
onClose={onDismiss ? () => onDismiss(notification) : undefined}
|
||||
title={notification.title}
|
||||
description={isRaceNotification ? 'Race Update' : 'Action Required'}
|
||||
icon={<Icon icon={NotificationIcon} size={5} intent="primary" />}
|
||||
footer={
|
||||
<React.Fragment>
|
||||
{notification.actions && notification.actions.length > 0 ? (
|
||||
notification.actions.map((action, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={action.type === 'primary' ? 'primary' : 'secondary'}
|
||||
onClick={() => handleAction(action)}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
))
|
||||
) : (
|
||||
isRaceNotification ? (
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => (onDismiss ? onDismiss(notification) : onAction(notification, 'dismiss'))}
|
||||
>
|
||||
<Icon icon={NotificationIcon} size={5} color={colors.text} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text
|
||||
size="xs"
|
||||
weight="bold"
|
||||
className="uppercase tracking-widest"
|
||||
color="text-gray-500"
|
||||
>
|
||||
{isRaceNotification ? 'Race Update' : 'Action Required'}
|
||||
</Text>
|
||||
<Heading level={3} weight="bold" color="text-white">
|
||||
{notification.title}
|
||||
</Heading>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* X button for dismissible notifications */}
|
||||
{onDismiss && !notification.requiresResponse && (
|
||||
<IconButton
|
||||
icon={X}
|
||||
onClick={() => onDismiss(notification)}
|
||||
variant="ghost"
|
||||
size="md"
|
||||
color="text-gray-500"
|
||||
title="Dismiss notification"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Body */}
|
||||
<Box px={6} py={6}>
|
||||
<Text
|
||||
leading="relaxed"
|
||||
size="base"
|
||||
color="text-gray-300"
|
||||
block
|
||||
>
|
||||
{notification.message}
|
||||
</Text>
|
||||
|
||||
{/* Race performance stats */}
|
||||
{isRaceNotification && (
|
||||
<Box display="grid" gridCols={2} gap={4} mt={6}>
|
||||
<Box bg="graphite-black" rounded="sm" p={4} border borderColor="border-border-gray">
|
||||
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest">POSITION</Text>
|
||||
<Text size="2xl" weight="bold" color="text-white" block>
|
||||
{notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box bg="graphite-black" rounded="sm" p={4} border borderColor="border-border-gray">
|
||||
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest">RATING</Text>
|
||||
<Text size="2xl" weight="bold" color={ratingChange >= 0 ? 'text-success-green' : 'text-critical-red'} block>
|
||||
{ratingChange >= 0 ? '+' : ''}
|
||||
{ratingChange}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Deadline warning */}
|
||||
{hasDeadline && !isRaceNotification && (
|
||||
<Box mt={6} display="flex" alignItems="center" gap={3} px={4} py={3} rounded="sm" bg="warning-amber/5" border borderColor="border-warning-amber/20">
|
||||
<Icon icon={Clock} size={5} color="text-warning-amber" />
|
||||
<Box>
|
||||
<Text size="sm" weight="bold" color="text-warning-amber" block className="uppercase tracking-wider">Response Required</Text>
|
||||
<Text size="xs" color="text-gray-500" block mt={0.5}>
|
||||
By {deadline ? deadline.toLocaleDateString() : ''} {deadline ? deadline.toLocaleTimeString() : ''}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Additional context from data */}
|
||||
{protestId && (
|
||||
<Box mt={6} p={3} rounded="sm" bg="graphite-black" border borderColor="border-border-gray">
|
||||
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest text-[10px]">PROTEST ID</Text>
|
||||
<Text size="xs" color="text-gray-400" font="mono" block>
|
||||
{protestId}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Actions */}
|
||||
<Box
|
||||
px={6}
|
||||
py={4}
|
||||
borderTop
|
||||
borderColor="border-border-gray"
|
||||
bg="graphite-black"
|
||||
>
|
||||
<Box display="flex" flexWrap="wrap" gap={3} justifyContent="end">
|
||||
{notification.actions && notification.actions.length > 0 ? (
|
||||
notification.actions.map((action, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={action.type === 'primary' ? 'primary' : 'secondary'}
|
||||
onClick={() => handleAction(action)}
|
||||
className={action.type === 'danger' ? 'bg-critical-red hover:bg-critical-red/90' : ''}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
))
|
||||
) : (
|
||||
isRaceNotification ? (
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => (onDismiss ? onDismiss(notification) : onAction(notification, 'dismiss'))}
|
||||
>
|
||||
Dismiss
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handlePrimaryAction}
|
||||
>
|
||||
{notification.type === 'race_performance_summary' ? 'View Results' : 'View Standings'}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button variant="primary" onClick={handlePrimaryAction}>
|
||||
{notification.actionUrl ? 'View Details' : 'Acknowledge'}
|
||||
</Button>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Cannot dismiss warning */}
|
||||
{notification.requiresResponse && !isRaceNotification && (
|
||||
<Box px={6} py={2} bg="critical-red/5" borderTop borderColor="border-critical-red/10">
|
||||
<Text size="xs" color="text-critical-red" textAlign="center" block weight="medium">
|
||||
This action is required to continue
|
||||
</Text>
|
||||
</Box>
|
||||
Dismiss
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handlePrimaryAction}
|
||||
>
|
||||
{notification.type === 'race_performance_summary' ? 'View Results' : 'View Standings'}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button variant="primary" onClick={handlePrimaryAction}>
|
||||
{notification.actionUrl ? 'View Details' : 'Acknowledge'}
|
||||
</Button>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
}
|
||||
>
|
||||
<Text leading="relaxed" size="base" variant="med" block>
|
||||
{notification.message}
|
||||
</Text>
|
||||
|
||||
{isRaceNotification && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1.5rem' }}>
|
||||
<NotificationStat
|
||||
label="POSITION"
|
||||
value={notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`}
|
||||
/>
|
||||
<NotificationStat
|
||||
label="RATING"
|
||||
value={`${ratingChange >= 0 ? '+' : ''}${ratingChange}`}
|
||||
intent={ratingChange >= 0 ? 'success' : 'critical'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasDeadline && !isRaceNotification && (
|
||||
<NotificationDeadline
|
||||
label="Response Required"
|
||||
deadline={`By ${deadline ? deadline.toLocaleDateString() : ''} ${deadline ? deadline.toLocaleTimeString() : ''}`}
|
||||
icon={Clock}
|
||||
/>
|
||||
)}
|
||||
|
||||
{protestId && (
|
||||
<div style={{ marginTop: '1.5rem', padding: '0.75rem', backgroundColor: 'var(--ui-color-bg-base)', border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-sm)' }}>
|
||||
<Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>PROTEST ID</Text>
|
||||
<Text size="xs" variant="med" font="mono" block>{protestId}</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{notification.requiresResponse && !isRaceNotification && (
|
||||
<div style={{ marginTop: '1rem', textAlign: 'center' }}>
|
||||
<Text size="xs" variant="critical" weight="medium">
|
||||
This action is required to continue
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user