feat: convert to nextjs

components/Toast.tsx

@@ -0,0 +1,24 @@
+import { AlertCircle } from 'lucide-react';
+import { Toast } from '../context/toast/ToastContext';
+
+interface ToastsProps {
+  toasts: Toast[];
+}
+
+export const Toasts = ({ toasts }: ToastsProps) => {
+  return (
+    <div className='fixed bottom-4 left-4 z-[9999] space-y-2'>
+      {toasts.map(toast => {
+        return (
+          <div
+            key={toast.id}
+            className='flex items-center gap-2 p-3 text-red-600 bg-red-50 rounded-lg border border-red-200 shadow-lg hover:shadow-xl'
+          >
+            <AlertCircle className='h-5 w-5 shrink-0' />
+            <p className='text-sm'>{toast.message}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};