init

src/lib/sonner/index.tsx

@@ -0,0 +1,48 @@
+import { toast as sonnerToast } from 'sonner';
+import { ToastProps } from './types';
+import { Notification } from '@mantine/core';
+import { ShieldCheckIcon, WarningCircleIcon } from '@phosphor-icons/react';
+
+const makeToast = (toast: Omit<ToastProps, 'id'>) => {
+  return sonnerToast.custom((id) => (
+    <Toast
+      id={id}
+      title={toast.title}
+      description={toast.description}
+      withCloseButton={toast.withCloseButton}
+      icon={toast.icon}
+      color={toast.color}
+      loading={!!toast.loading}
+    />
+  ))
+}
+
+function success(toast: Omit<ToastProps, 'id'> | string) {
+  const config = typeof toast === 'string' ? { description: toast } : toast;
+  return makeToast({ ...config, icon: <ShieldCheckIcon color='lightgreen' size={48} weight='fill'/> });
+}
+
+function error(toast: Omit<ToastProps, 'id'> | string) {
+  const config = typeof toast === 'string' ? { description: toast } : toast;
+  return makeToast({ ...config, icon: <WarningCircleIcon color='lightcoral' size={48} weight='fill' /> });
+}
+
+function Toast(props: ToastProps) {
+  const { title, description, withCloseButton, icon, loading } = props;
+
+  return (
+    <Notification miw='md' color={'rgba(0,0,0,0)'} withBorder
+      withCloseButton={!!withCloseButton}
+      loading={loading}
+      title={title}
+      icon={icon}
+    >
+      {description}
+    </Notification>
+  );
+}
+
+export default { 
+  success,
+  error,
+}

src/lib/sonner/types.ts

@@ -0,0 +1,11 @@
+import { MantineColor } from "@mantine/core";
+
+export interface ToastProps {
+  id: string | number;
+  title?: string;
+  description?: string;
+  withCloseButton?: boolean;
+  icon?: React.ReactNode;
+  color?: MantineColor;
+  loading?: boolean;
+}