Add Notification Provider

components/cards/settings/NotificationSettings.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+import AddNotification from '@/components/dialogues/AddNotification';
+import useNotifications from '@/hooks/useNotifications';
+import { Plus } from 'lucide-react';
+
+export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
+    const { loadNotifications } = useNotifications();
+
+  return (
+    <div>
+        <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
+            <div className="flex items-center justify-between">
+                <div>
+                    <h2 className="text-lg font-bold">Notification Settings</h2>
+                    <p className="text-sm opacity-70">Manage your notification settings</p>
+                </div>
+                <button className="btn btn-primary" onClick={() => (document.getElementById('add_notification') as HTMLDialogElement)?.showModal()}>
+                    <Plus className="w-5 h-5" />
+                    Add Provider
+                </button>
+            </div>
+            <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
+        </div>
+    </div>
+  );
+};