Spaces:
Running
Running
| import React, { useEffect, useState } from 'react'; | |
| import { Check, Bell } from 'lucide-react'; | |
| import { supabase } from '../lib/supabase'; | |
| export default function NotificationCenter({ userId }) { | |
| const [notifications, setNotifications] = useState([]); | |
| const [loading, setLoading] = useState(true); | |
| const [updating, setUpdating] = useState({}); | |
| useEffect(() => { | |
| if (!userId) return; | |
| const fetchNotifications = async () => { | |
| setLoading(true); | |
| const { data, error } = await supabase | |
| .from('notifications') | |
| .select('*') | |
| .eq('user_id', userId) | |
| .eq('seen', false) | |
| .order('created_at', { ascending: false }); | |
| if (!error) setNotifications(data || []); | |
| setLoading(false); | |
| }; | |
| fetchNotifications(); | |
| }, [userId]); | |
| const markAsSeen = async (id) => { | |
| setUpdating(u => ({ ...u, [id]: true })); | |
| await supabase | |
| .from('notifications') | |
| .update({ seen: true }) | |
| .eq('id', id); | |
| setNotifications(n => n.filter(notif => notif.id !== id)); | |
| setUpdating(u => ({ ...u, [id]: false })); | |
| }; | |
| if (loading) { | |
| return ( | |
| <div className="space-y-2.5 font-sans"> | |
| {[1, 2].map((i) => ( | |
| <div key={i} className="h-12 w-full bg-slate-100 dark:bg-slate-800 animate-pulse rounded-xl" /> | |
| ))} | |
| </div> | |
| ); | |
| } | |
| if (!notifications.length) return null; | |
| return ( | |
| <div className="space-y-2.5 font-sans"> | |
| {notifications.map((notif) => ( | |
| <div | |
| key={notif.id} | |
| className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-3.5 shadow-2xs flex items-center justify-between gap-3 text-sm" | |
| > | |
| <div className="flex items-center gap-2.5 min-w-0"> | |
| <div className="w-7 h-7 rounded-lg bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0"> | |
| <Bell className="w-3.5 h-3.5" /> | |
| </div> | |
| <p className="text-slate-800 dark:text-slate-200 font-medium text-xs sm:text-sm leading-snug truncate"> | |
| {notif.message} | |
| </p> | |
| </div> | |
| <button | |
| onClick={() => markAsSeen(notif.id)} | |
| disabled={updating[notif.id]} | |
| className="shrink-0 px-2.5 py-1 text-xs font-semibold text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-lg transition-colors inline-flex items-center gap-1 cursor-pointer disabled:opacity-50" | |
| > | |
| <Check className="w-3 h-3 text-emerald-600" /> | |
| <span>Done</span> | |
| </button> | |
| </div> | |
| ))} | |
| </div> | |
| ); | |
| } |