Empty Notifications View

This commit is contained in:
headlesdev 2025-05-25 01:01:15 +02:00
parent 1e93f84b24
commit 947cec0d7a

View File

@ -4,7 +4,7 @@ import { useState } from 'react';
import AddNotification from '@/components/dialogues/AddNotification'; import AddNotification from '@/components/dialogues/AddNotification';
import DeleteNotification from '@/components/dialogues/DeleteNotification'; import DeleteNotification from '@/components/dialogues/DeleteNotification';
import useNotifications from '@/hooks/useNotifications'; import useNotifications from '@/hooks/useNotifications';
import { Plus, Trash2, Play } from 'lucide-react'; import { Plus, Trash2, Play, Bell } from 'lucide-react';
export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => { export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
const { loadNotifications, notifications } = useNotifications(); const { loadNotifications, notifications } = useNotifications();
@ -23,7 +23,9 @@ export const NotificationSettings = ({ onError, onSuccess }: { onError: (message
Add Provider Add Provider
</button> </button>
</div> </div>
<div className='overflow-x-auto pt-4'> { notifications && notifications.length > 0 ? (
<div className="rounded-xl overflow-hidden border border-base-200 mt-4">
<div className='overflow-x-auto'>
<table className='table table-zebra table-pin-cols'> <table className='table table-zebra table-pin-cols'>
<thead> <thead>
<tr> <tr>
@ -50,6 +52,17 @@ export const NotificationSettings = ({ onError, onSuccess }: { onError: (message
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
) : (
<div className='pt-4'>
<div className="flex flex-col items-center justify-center py-12 bg-base-300 rounded-xl">
<div className="bg-base-100 p-4 rounded-full mb-4">
<Bell className="h-8 w-8 text-base-content/50" />
</div>
<p className="text-base-content/70 mb-4">No notification providers have been added yet.</p>
</div>
</div>
)}
<AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} /> <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
{deleteNotificationId && ( {deleteNotificationId && (
<DeleteNotification notificationId={deleteNotificationId} onNotificationDeleted={loadNotifications} onError={onError} onSuccess={onSuccess} /> <DeleteNotification notificationId={deleteNotificationId} onNotificationDeleted={loadNotifications} onError={onError} onSuccess={onSuccess} />