Untitled
unknown
plain_text
a year ago
2.5 kB
3
Indexable
"use client"; import { cn } from "@/common/helpers/cn"; import ProfileUpdate from "@/module/Profile"; import { Check, LucideAlertTriangle, LucideCheck, LucideInfo, LucideX } from "lucide-react"; import toast from "react-hot-toast"; const colorMap = { "danger": "asdfasdf", "info": "asdfasdf", "success": "asdfasdf", "alert": "asdfasdf", } const mainIconMap = { "danger": ( <LucideX strokeWidth={1.5} className="text-white bg-danger-400 rounded-full" size={18} /> ), "info": ( <LucideInfo strokeWidth={2} className="text-info-500" size={25} /> ), "success": ( <LucideCheck strokeWidth={2} className="text-white bg-success-500 rounded-full p-1" size={20} /> ), "alert": ( <LucideAlertTriangle strokeWidth={2} className="text-warning-500" size={25} /> ), } const Notification = ({ type, message }: { type: 'danger' | 'alert' | 'success' | 'info', message: string }) => { return toast.custom((t) => ( <div className={cn( t.visible ? "animate-enter" : "animate-leave", type === "danger" && "bg-danger-100", type === "alert" && "bg-warning-100", type === "success" && "bg-success-100", type === "info" && "bg-info-100", "shadow-lg rounded-lg flex" )} > <div className="px-4 py-4 flex items-center justify-between space-x-12"> <div className="flex items-center justify-center space-x-4"> {mainIconMap[type]} <p className={cn( "flex-1", type === "danger" && "text-danger-400", type === "alert" && "text-warning-400", type === "success" && "text-success-400", type === "info" && "text-info-400", )} >{message}</p> </div> <div className="flex-shrink-0"> <LucideX size={20} strokeWidth={1.5} className={cn( "cursor-pointer", type === "danger" && "text-danger-400", type === "alert" && "text-warning-400", type === "success" && "text-success-400", type === "info" && "text-info-400", )} onClick={() => toast.dismiss(t.id)} /> </div> </div> </div> )); }; export default Notification;
Editor is loading...
Leave a Comment