initial commit

hooks/use-toast.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface Toast {
+  id: string
+  title?: string
+  description?: string
+  variant?: 'default' | 'destructive'
+}
+
+interface ToastContext {
+  toasts: Toast[]
+  toast: (props: Omit<Toast, 'id'>) => void
+  dismiss: (id: string) => void
+}
+
+const ToastContext = React.createContext<ToastContext | undefined>(undefined)
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = React.useState<Toast[]>([])
+
+  const toast = React.useCallback((props: Omit<Toast, 'id'>) => {
+    const id = Math.random().toString(36).slice(2)
+    setToasts((prev) => [...prev, { ...props, id }])
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id))
+    }, 5000)
+  }, [])
+
+  const dismiss = React.useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  return (
+    <ToastContext.Provider value={{ toasts, toast, dismiss }}>
+      {children}
+      <ToastViewport toasts={toasts} onDismiss={dismiss} />
+    </ToastContext.Provider>
+  )
+}
+
+function ToastViewport({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+      {toasts.map((t) => (
+        <ToastItem key={t.id} toast={t} onDismiss={onDismiss} />
+      ))}
+    </div>
+  )
+}
+
+function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-4 rounded-lg border bg-card shadow-lg min-w-[280px] max-w-sm animate-in slide-in-from-bottom-2',
+        toast.variant === 'destructive' && 'border-red-500/50 bg-red-500/10 text-red-500'
+      )}
+    >
+      <div className="flex-1">
+        {toast.title && <div className="font-medium">{toast.title}</div>}
+        {toast.description && <div className="text-sm opacity-90 mt-0.5">{toast.description}</div>}
+      </div>
+      <button
+        onClick={() => onDismiss(toast.id)}
+        className="text-muted-foreground hover:text-foreground shrink-0"
+        aria-label="Dismiss"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}
+
+export function useToast() {
+  const context = React.useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider')
+  }
+  return context
+}