feat: compose;

feat: frontend added

Frontend/components/ui/sonner.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Toaster as Sonner } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme="dark"
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-slate-900 group-[.toaster]:text-white group-[.toaster]:border-slate-700 group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-slate-400',
+          actionButton:
+            'group-[.toast]:bg-blue-500 group-[.toast]:text-white',
+          cancelButton:
+            'group-[.toast]:bg-slate-700 group-[.toast]:text-slate-300',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };