cal.pub0.org/packages/ui/v2/notfications.tsx

52 lines
1.5 KiB
TypeScript

import { Check, Info } from "react-feather";
import toast from "react-hot-toast";
export default function showToast(message: string, variant: "success" | "warning" | "error") {
switch (variant) {
case "success":
toast.custom(
() => (
<div className="bg-brand-500 mt-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
<Check className="h-4 w-4" />
<p>{message}</p>
</div>
),
{ duration: 6000 }
);
break;
case "error":
toast.custom(
() => (
<div className="mt-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md">
<Info className="h-4 w-4" />
<p>{message}</p>
</div>
),
{ duration: 6000 }
);
break;
case "warning":
toast.custom(
() => (
<div className="bg-brand-500 mt-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
<Info className="h-4 w-4" />
<p>{message}</p>
</div>
),
{ duration: 6000 }
);
break;
default:
toast.custom(
() => (
<div className="bg-brand-500 mt-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md">
<Check className="h-4 w-4" />
<p>{message}</p>
</div>
),
{ duration: 6000 }
);
break;
}
}