mirror of
https://github.com/dergigi/boris.git
synced 2025-12-29 20:44:37 +01:00
61307fc22d
- Create Toast component for user feedback - Add toast notification styles with slide-in animation - Remove Save Settings button from Settings component - Implement auto-save with 500ms debounce on setting changes - Show success/error toast messages when settings are saved - Settings now save automatically as user makes changes - Improves UX by eliminating manual save step
30 lines
740 B
TypeScript
30 lines
740 B
TypeScript
import React, { useEffect } from 'react'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
interface ToastProps {
|
|
message: string
|
|
type?: 'success' | 'error'
|
|
onClose: () => void
|
|
duration?: number
|
|
}
|
|
|
|
const Toast: React.FC<ToastProps> = ({ message, type = 'success', onClose, duration = 3000 }) => {
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
onClose()
|
|
}, duration)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [duration, onClose])
|
|
|
|
return (
|
|
<div className={`toast toast-${type}`}>
|
|
<FontAwesomeIcon icon={type === 'success' ? faCheck : faTimes} />
|
|
<span>{message}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Toast
|