100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { Toast as UIToast } from '@/ui/Toast';
|
|
import { Text } from '@/ui/Text';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { AlertCircle, CheckCircle, Info } from 'lucide-react';
|
|
import React, { createContext, useContext, useState } from '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={100}
|
|
display="flex"
|
|
flexDirection="col"
|
|
gap={3}
|
|
style={{ pointerEvents: 'none' }}
|
|
>
|
|
{toasts.map((toast) => (
|
|
<Box key={toast.id} style={{ pointerEvents: 'auto' }}>
|
|
<ToastItem
|
|
toast={toast}
|
|
onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</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: {
|
|
intent: 'success' as const,
|
|
icon: CheckCircle,
|
|
},
|
|
error: {
|
|
intent: 'critical' as const,
|
|
icon: AlertCircle,
|
|
},
|
|
info: {
|
|
intent: 'primary' as const,
|
|
icon: Info,
|
|
},
|
|
};
|
|
|
|
const config = variants[toast.variant];
|
|
|
|
return (
|
|
<UIToast
|
|
onClose={onClose}
|
|
intent={config.intent}
|
|
icon={<Icon icon={config.icon} size={5} intent={config.intent} />}
|
|
isVisible={true}
|
|
isExiting={false}
|
|
>
|
|
<Text size="sm" variant="high">
|
|
{toast.message}
|
|
</Text>
|
|
</UIToast>
|
|
);
|
|
}
|