Files
the-other-dude/frontend/src/components/ui/toast.tsx
Jason Staack 72c09d95bb feat(ui): add error/empty state classes, update toast styling
- Toast: bg-elevated surface, border-default, radius-control, remove
  richColors (use token colors instead of Sonner defaults)
- Add .panel-empty and .panel-error CSS utility classes
- Available for Phase 4 page-level refinement

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 13:43:56 -05:00

40 lines
1.1 KiB
TypeScript

import { toast as sonnerToast, Toaster as SonnerToaster } from 'sonner'
import { useUIStore } from '@/lib/store'
// Re-export Sonner's Toaster with theme-aware styling
export function Toaster() {
const theme = useUIStore((s) => s.theme)
return (
<SonnerToaster
position="bottom-right"
toastOptions={{
className: 'bg-elevated border border-border-default text-text-primary rounded-[var(--radius-control)]',
descriptionClassName: 'text-text-secondary',
}}
theme={theme}
/>
)
}
// Preserve existing toast() API for backward compatibility
// The app calls: toast({ title: '...', description: '...', variant: 'destructive' })
interface ToastOptions {
title: string
description?: string
variant?: 'default' | 'destructive'
}
// eslint-disable-next-line react-refresh/only-export-components
export function toast(options: ToastOptions) {
if (options.variant === 'destructive') {
sonnerToast.error(options.title, {
description: options.description,
})
} else {
sonnerToast.success(options.title, {
description: options.description,
})
}
}