diff --git a/packages/ui/src/components/Toast.tsx b/packages/ui/src/components/Toast.tsx index 76a8af735..ca25d51bd 100644 --- a/packages/ui/src/components/Toast.tsx +++ b/packages/ui/src/components/Toast.tsx @@ -1,9 +1,10 @@ 'use client'; -import { ReactNode } from 'react'; +import React from 'react'; import { LuCircleAlert, LuCircleCheck, LuX } from 'react-icons/lu'; import { Toaster as Sonner, toast as sonnerToast } from 'sonner'; +import { cn } from '../lib/utils'; import { Button } from './Button'; export const Toast = () => { @@ -15,9 +16,13 @@ export const Toast = () => { visibleToasts={3} duration={3000} icons={{ - success: , - close: , - error: , + success: ( + + ), + close: , + error: ( + + ), }} toastOptions={{ classNames: { @@ -39,13 +44,20 @@ const ToastWrapper = ({ id, dismissable = false, children, + isSingleLine = false, }: { id: string | number; dismissable?: boolean; children: React.ReactNode; + isSingleLine?: boolean; }) => { return ( -
+
{children} {dismissable && (
); + +export const ToastWithActions = () => ( +
+ +
+ ], + }) + } + > + Toast with One Action + + + , + , + ], + }) + } + > + Toast with Two Actions + +
+
+); + +export const SingleLineToasts = () => ( +
+ +
+ , + ], + }) + } + > + Single Line Success with Action + + + , + , + ], + }) + } + > + Single Line Success with Two Actions + + + + + +
+
+);