init

apps/web/src/ui/toast.tsx

@@ -0,0 +1,24 @@
+interface ToastProps {
+  message: string;
+  variant: "success" | "error";
+  onDismiss: () => void;
+}
+
+const variantClasses = {
+  success: "border-emerald-200 bg-emerald-50 text-emerald-800",
+  error: "border-red-200 bg-red-50 text-red-700"
+} as const;
+
+export function Toast({ message, variant, onDismiss }: ToastProps) {
+  return (
+    <div
+      className={`flex items-start justify-between gap-3 rounded-xl border px-4 py-3 text-sm shadow-sm ${variantClasses[variant]}`}
+      role={variant === "error" ? "alert" : "status"}
+    >
+      <span>{message}</span>
+      <button className="font-medium" onClick={onDismiss} type="button">
+        Dismiss
+      </button>
+    </div>
+  );
+}