steve
b79bfcf7a9
Build image / build-and-push (push) Successful in 13s
Co-authored-by: Steve Dudenhoeffer <[email protected]>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { create } from 'zustand'
|
|
import { cn } from '@/lib/cn'
|
|
|
|
type ToastTone = 'info' | 'error'
|
|
interface Toast {
|
|
id: number
|
|
message: string
|
|
tone: ToastTone
|
|
}
|
|
|
|
interface ToastState {
|
|
toasts: Toast[]
|
|
push: (message: string, tone?: ToastTone) => void
|
|
dismiss: (id: number) => void
|
|
}
|
|
|
|
let nextId = 1
|
|
|
|
export const useToastStore = create<ToastState>((set) => ({
|
|
toasts: [],
|
|
push: (message, tone = 'info') => set((s) => ({ toasts: [...s.toasts, { id: nextId++, message, tone }] })),
|
|
dismiss: (id) => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
|
|
}))
|
|
|
|
/** Fire a toast from anywhere (including non-component code). */
|
|
export const toast = {
|
|
info: (m: string) => useToastStore.getState().push(m, 'info'),
|
|
error: (m: string) => useToastStore.getState().push(m, 'error'),
|
|
}
|
|
|
|
// Param is `item`, not `toast`, so it doesn't shadow the module's `toast` export.
|
|
function ToastItem({ item }: { item: Toast }) {
|
|
const dismiss = useToastStore((s) => s.dismiss)
|
|
useEffect(() => {
|
|
const t = setTimeout(() => dismiss(item.id), 4000)
|
|
return () => clearTimeout(t)
|
|
}, [item.id, dismiss])
|
|
return (
|
|
<div
|
|
role={item.tone === 'error' ? 'alert' : 'status'}
|
|
className={cn(
|
|
'pointer-events-auto rounded-md border px-3 py-2 text-sm shadow-md',
|
|
item.tone === 'error'
|
|
? 'border-red-500/40 bg-red-500/10 text-red-700 dark:text-red-300'
|
|
: 'border-border bg-surface text-fg',
|
|
)}
|
|
>
|
|
{item.message}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/** Fixed stack of active toasts. Mount once near the app root. */
|
|
export function Toaster() {
|
|
const toasts = useToastStore((s) => s.toasts)
|
|
if (toasts.length === 0) return null
|
|
return (
|
|
<div className="pointer-events-none fixed bottom-4 left-1/2 z-[60] flex -translate-x-1/2 flex-col items-center gap-2">
|
|
{toasts.map((t) => (
|
|
<ToastItem key={t.id} item={t} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|