MicroClub Sonner

1'use client';
2 
3import { Toaster as SonnerComponent, toast as rawToast } from 'sonner';
4import { CheckCircle2, AlertCircle } from 'lucide-react';
5 
6type ToasterProps = React.ComponentProps<typeof SonnerComponent>;
7 
8const toastIcons = {
9  success: <CheckCircle2 className="text-muted-foreground shrink-0 h-3.5 w-3.5" />,
10  warning: <AlertCircle className="text-muted-foreground shrink-0 h-3.5 w-3.5" />,
11  error: <AlertCircle className="text-muted-foreground  shrink-0 h-3.5 w-3.5" />,
12};
13 
14interface ToastOptions {
15  description?: string;
16  action?: {
17    label: string;
18    onClick: () => void;
19  };
20}
21 
22const mcToastCustom = (
23  message: string,
24  variant?: 'success' | 'warning' | 'error',
25  options?: ToastOptions
26) => {
27  const Icon = variant ? toastIcons[variant] : null;
28 
29  return rawToast(
30    <div className="w-full h-full flex flex-col items-start justify-center gap-0.5">
31      <div className="flex items-center gap-1.5 w-full max-w-66.5">
32        {Icon}
33        <span className="text-sm font-medium tracking-normal leading-5 text-card-foreground">
34          {message}
35        </span>
36      </div>
37 
38      {options?.description && (
39        <p className="text-sm font-normal tracking-normal leading-5 text-muted-foreground max-w-66.5">
40          {options.description}
41        </p>
42      )}
43    </div>,
44    {
45      action: options?.action,
46    }
47  );
48};
49 
50export const toast = Object.assign(
51  (message: string, options?: ToastOptions) => mcToastCustom(message, undefined, options),
52  {
53    success: (message: string, options?: ToastOptions) =>
54      mcToastCustom(message, 'success', options),
55    warning: (message: string, options?: ToastOptions) =>
56      mcToastCustom(message, 'warning', options),
57    error: (message: string, options?: ToastOptions) => mcToastCustom(message, 'error', options),
58  }
59);
60 
61const McSonner = ({ ...props }: ToasterProps) => {
62  return (
63    <SonnerComponent
64      className=""
65      position="top-center"
66      toastOptions={{
67        unstyled: true,
68        classNames: {
69          toast:
70            'w-97.5 min-h-18.5 bg-background flex items-center justify-between gap-1.5 p-4 border-[1px] rounded-lg shadow-xs border-border',
71          actionButton:
72            'flex items-center justify-center bg-primary text-background text-sm py-2 px-3.5 min-w-15.5 max-w-21.5 min-h-9 rounded-[8px] shadow-xs shrink-0 cursor-pointer',
73        },
74      }}
75      {...props}
76    />
77  );
78};
79 
80export default McSonner;