58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { Check, CircleAlert, CircleX, Info } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type ToastType = "success" | "info" | "warning" | "error";
|
|
|
|
const toastStyles: Record<ToastType, string> = {
|
|
success: "border-emerald-950 bg-emerald-950/70 text-emerald-300",
|
|
info: "border-blue-950 bg-blue-950/70 text-blue-300",
|
|
warning: "border-yellow-950 bg-yellow-950/70 text-yellow-200",
|
|
error: "border-red-950 bg-red-950/70 text-red-200",
|
|
};
|
|
|
|
const toastIcons: Record<ToastType, React.ElementType> = {
|
|
success: Check,
|
|
info: Info,
|
|
warning: CircleAlert,
|
|
error: CircleX,
|
|
};
|
|
|
|
export function FakeToast({
|
|
type = "success",
|
|
children,
|
|
onIconClick,
|
|
}: {
|
|
type?: ToastType;
|
|
children: React.ReactNode;
|
|
onIconClick?: () => void;
|
|
}) {
|
|
const Icon = toastIcons[type];
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex w-80 items-center gap-2 rounded-lg border p-4 shadow-[0_4px_12px_rgb(0_0_0/0.3)] backdrop-blur-xs",
|
|
toastStyles[type],
|
|
)}
|
|
>
|
|
{onIconClick ? (
|
|
<button
|
|
type="button"
|
|
aria-label="Change toast type"
|
|
onClick={onIconClick}
|
|
className="shrink-0 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-current"
|
|
>
|
|
<Icon
|
|
aria-hidden="true"
|
|
className="-m-2 size-8 rounded-full p-2 transition-colors hover:bg-current/20"
|
|
strokeWidth={2}
|
|
/>
|
|
</button>
|
|
) : (
|
|
<Icon aria-hidden="true" className="size-4 shrink-0" strokeWidth={2} />
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|