Install Tailwind CSS v4 + shadcn/ui with Radix UI primitives. Migrate all UI components (Sidebar, NoteList, Editor tabs, Inspector, dialogs, palette) from BEM CSS to Tailwind utility classes and shadcn components (Button, Input, Dialog, Badge, etc.). Map theme system to shadcn CSS variables while preserving BlockNote editor styles untouched. Remove 8 old CSS files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
29 lines
707 B
TypeScript
29 lines
707 B
TypeScript
import { useEffect } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface ToastProps {
|
|
message: string | null
|
|
onDismiss: () => void
|
|
}
|
|
|
|
export function Toast({ message, onDismiss }: ToastProps) {
|
|
useEffect(() => {
|
|
if (!message) return
|
|
const timer = setTimeout(onDismiss, 2000)
|
|
return () => clearTimeout(timer)
|
|
}, [message, onDismiss])
|
|
|
|
if (!message) return null
|
|
|
|
return (
|
|
<div className={cn(
|
|
"fixed bottom-8 left-1/2 -translate-x-1/2 z-[1100]",
|
|
"bg-secondary text-foreground px-5 py-2 rounded-lg text-[13px]",
|
|
"shadow-[0_4px_16px_var(--shadow-dialog)]",
|
|
"animate-in slide-in-from-bottom-2 fade-in duration-200"
|
|
)}>
|
|
{message}
|
|
</div>
|
|
)
|
|
}
|