124 lines
3.2 KiB
TypeScript
124 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, createContext, useContext } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { CheckCircle, AlertCircle, Info, X } from 'lucide-react';
|
|
|
|
interface Toast {
|
|
id: string;
|
|
message: string;
|
|
variant: 'success' | 'error' | 'info';
|
|
}
|
|
|
|
interface ToastContextType {
|
|
showToast: (message: string, variant: 'success' | 'error' | 'info') => void;
|
|
}
|
|
|
|
const ToastContext = createContext<ToastContextType | undefined>(undefined);
|
|
|
|
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
|
const [toasts, setToasts] = useState<Toast[]>([]);
|
|
|
|
const showToast = (message: string, variant: 'success' | 'error' | 'info') => {
|
|
const id = Math.random().toString(36).substring(2, 9);
|
|
setToasts((prev) => [...prev, { id, message, variant }]);
|
|
setTimeout(() => {
|
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
}, 5000);
|
|
};
|
|
|
|
return (
|
|
<ToastContext.Provider value={{ showToast }}>
|
|
{children}
|
|
<Box
|
|
position="fixed"
|
|
bottom={6}
|
|
right={6}
|
|
zIndex={50}
|
|
className="pointer-events-none space-y-3"
|
|
>
|
|
<AnimatePresence>
|
|
{toasts.map((toast) => (
|
|
<ToastItem
|
|
key={toast.id}
|
|
toast={toast}
|
|
onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
|
|
/>
|
|
))}
|
|
</AnimatePresence>
|
|
</Box>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useToast() {
|
|
const context = useContext(ToastContext);
|
|
if (!context) {
|
|
throw new Error('useToast must be used within a ToastProvider');
|
|
}
|
|
return context;
|
|
}
|
|
|
|
function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
|
|
const variants = {
|
|
success: {
|
|
bg: 'bg-deep-graphite',
|
|
border: 'border-performance-green/30',
|
|
icon: CheckCircle,
|
|
iconColor: 'text-performance-green',
|
|
},
|
|
error: {
|
|
bg: 'bg-deep-graphite',
|
|
border: 'border-racing-red/30',
|
|
icon: AlertCircle,
|
|
iconColor: 'text-racing-red',
|
|
},
|
|
info: {
|
|
bg: 'bg-deep-graphite',
|
|
border: 'border-primary-blue/30',
|
|
icon: Info,
|
|
iconColor: 'text-primary-blue',
|
|
},
|
|
};
|
|
|
|
const config = variants[toast.variant];
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
|
className="pointer-events-auto"
|
|
>
|
|
<Box
|
|
px={4}
|
|
py={3}
|
|
rounded="lg"
|
|
bg={config.bg}
|
|
border
|
|
borderColor={config.border}
|
|
shadow="xl"
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
minW="300px"
|
|
>
|
|
<Icon className={`w-5 h-5 ${config.iconColor}`} />
|
|
<Text size="sm" color="text-white" flexGrow={1}>
|
|
{toast.message}
|
|
</Text>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-500 hover:text-white transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</Box>
|
|
</motion.div>
|
|
);
|
|
}
|