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

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 22:55:55 +01:00
parent b43a23a48c
commit aeaa43f4d3
179 changed files with 4736 additions and 6832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
apps/website/components/notifications/ToastNotification.tsx
View File

@@ -1,8 +1,7 @@
'use client';
import { Icon } from '@/ui/Icon';
import { IconButton } from '@/ui/IconButton';
import { Box } from '@/ui/primitives/Box';
import { Toast } from '@/ui/Toast';
import { Text } from '@/ui/Text';
import {
AlertTriangle,
@@ -13,9 +12,8 @@ import {
Trophy,
Users,
Vote,
X,
} from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import type { Notification } from './notificationTypes';
interface ToastNotificationProps {
@@ -36,16 +34,6 @@ const notificationIcons: Record<string, typeof Bell> = {
race_reminder: Flag,
};
const notificationColors: Record<string, { bg: string; border: string; text: string }> = {
protest_filed: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
protest_defense_requested: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
protest_vote_required: { bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', text: 'text-primary-blue' },
penalty_issued: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
race_results_posted: { bg: 'bg-performance-green/10', border: 'border-performance-green/30', text: 'text-performance-green' },
league_invite: { bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', text: 'text-primary-blue' },
race_reminder: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
};
export function ToastNotification({
notification,
onDismiss,
@@ -55,6 +43,7 @@ export function ToastNotification({
}: ToastNotificationProps) {
const [isVisible, setIsVisible] = useState(false);
const [isExiting, setIsExiting] = useState(false);
const [progress, setProgress] = useState(100);
const handleDismiss = useCallback(() => {
setIsExiting(true);
@@ -64,17 +53,22 @@ export function ToastNotification({
}, [notification, onDismiss]);
useEffect(() => {
// Animate in
const showTimeout = setTimeout(() => setIsVisible(true), 10);
// Auto-hide
const hideTimeout = setTimeout(() => {
handleDismiss();
}, autoHideDuration);
const startTime = Date.now();
const interval = setInterval(() => {
const elapsed = Date.now() - startTime;
const remaining = Math.max(0, 100 - (elapsed / autoHideDuration) * 100);
setProgress(remaining);
if (remaining === 0) {
clearInterval(interval);
handleDismiss();
}
}, 10);
return () => {
clearTimeout(showTimeout);
clearTimeout(hideTimeout);
clearInterval(interval);
};
}, [autoHideDuration, handleDismiss]);
@@ -87,88 +81,30 @@ export function ToastNotification({
};
const NotificationIcon = notificationIcons[notification.type] || Bell;
const colors = notificationColors[notification.type] || {
bg: 'bg-gray-500/10',
border: 'border-gray-500/30',
text: 'text-gray-400',
};
return (
<Box
transform
transition
translateX={isVisible && !isExiting ? '0' : 'full'}
opacity={isVisible && !isExiting ? 1 : 0}
<Toast
title={notification.title ?? 'Notification'}
onClose={handleDismiss}
icon={<Icon icon={NotificationIcon} size={5} intent="primary" />}
isVisible={isVisible}
isExiting={isExiting}
progress={progress}
>
<Box
w="96"
rounded="xl"
border
borderColor={colors.border}
bg={colors.bg}
shadow="2xl"
overflow="hidden"
>
{/* Progress bar */}
<Box h="1" bg="bg-iron-gray/50" overflow="hidden">
<Box
h="full"
bg={colors.text.replace('text-', 'bg-')}
// eslint-disable-next-line gridpilot-rules/component-classification
className="animate-toast-progress"
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ animationDuration: `${autoHideDuration}ms` }}
/>
</Box>
<Box p={4}>
<Box display="flex" gap={3}>
{/* Icon */}
<Box p={2} rounded="lg" bg={colors.bg} flexShrink={0}>
<Icon icon={NotificationIcon} size={5} color={colors.text} />
</Box>
{/* Content */}
<Box flexGrow={1} minWidth="0">
<Box display="flex" alignItems="start" justifyContent="between" gap={2}>
<Text size="sm" weight="semibold" color="text-white" truncate>
{notification.title ?? 'Notification'}
</Text>
<IconButton
icon={X}
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
handleDismiss();
}}
variant="ghost"
size="sm"
color="text-gray-400"
/>
</Box>
<Text size="xs" color="text-gray-400" lineClamp={2} mt={1}>
{notification.message}
</Text>
{notification.actionUrl && (
<Box
as="button"
onClick={handleClick}
mt={2}
display="flex"
alignItems="center"
gap={1}
cursor="pointer"
hoverScale
>
<Text size="xs" weight="medium" color={colors.text}>
View details
</Text>
<Icon icon={ExternalLink} size={3} color={colors.text} />
</Box>
)}
</Box>
</Box>
</Box>
</Box>
</Box>
<Text size="xs" variant="low" lineClamp={2}>
{notification.message}
</Text>
{notification.actionUrl && (
<div
onClick={handleClick}
style={{ marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer' }}
>
<Text size="xs" weight="medium" variant="primary">
View details
</Text>
<Icon icon={ExternalLink} size={3} intent="primary" />
</div>
)}
</Toast>
);
}