Nikolay Tatarinov
2bd2c8dbca
- Added a custom light theme in app.css to match the dark theme's palette. - Introduced AdminBreadcrumbs component for improved navigation in admin pages. - Implemented Skeleton component for loading states in various views. - Added ToastContainer for displaying notifications and alerts. - Enhanced MapView with loading indicators and improved marker handling. - Updated MapCoordsDisplay to allow copying of shareable links. - Refactored MapControls and MapContextMenu for better usability. - Improved user experience in profile and admin pages with loading states and search functionality.
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
export type ToastType = 'success' | 'error' | 'info'
|
|
|
|
export interface Toast {
|
|
id: number
|
|
type: ToastType
|
|
text: string
|
|
}
|
|
|
|
const TOAST_STATE_KEY = 'hnh-map-toasts'
|
|
const DEFAULT_DURATION_MS = 4000
|
|
|
|
let nextId = 0
|
|
|
|
export function useToast() {
|
|
const toasts = useState<Toast[]>(TOAST_STATE_KEY, () => [])
|
|
|
|
function dismiss(id: number) {
|
|
toasts.value = toasts.value.filter((t) => t.id !== id)
|
|
}
|
|
|
|
function show(type: ToastType, text: string, durationMs = DEFAULT_DURATION_MS) {
|
|
const id = ++nextId
|
|
toasts.value = [...toasts.value, { id, type, text }]
|
|
if (durationMs > 0 && import.meta.client) {
|
|
setTimeout(() => dismiss(id), durationMs)
|
|
}
|
|
}
|
|
|
|
return {
|
|
toasts: readonly(toasts),
|
|
success: (text: string, durationMs?: number) => show('success', text, durationMs),
|
|
error: (text: string, durationMs?: number) => show('error', text, durationMs),
|
|
info: (text: string, durationMs?: number) => show('info', text, durationMs),
|
|
dismiss,
|
|
}
|
|
}
|