forked from amer2004/SweetHome
Added translation to all site with edit style
This commit is contained in:
@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Bell, CheckCircle, XCircle, Calendar, MessageCircle, CheckCheck, Loader2 } from 'lucide-react';
|
||||
@ -8,6 +9,7 @@ import AuthService from '@/app/services/AuthService';
|
||||
import { getUserNotifications } from '@/app/utils/api';
|
||||
|
||||
export default function NotificationsPage() {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const [notifications, setNotifications] = useState([]);
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
@ -32,7 +34,7 @@ export default function NotificationsPage() {
|
||||
setUnreadCount(items.length);
|
||||
} catch (err) {
|
||||
console.error('Error fetching notifications:', err);
|
||||
setError(err.message || 'فشل تحميل الإشعارات');
|
||||
setError(err.message || t('fetch-notifications-failed'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@ -59,7 +61,7 @@ export default function NotificationsPage() {
|
||||
className="text-center"
|
||||
>
|
||||
<Loader2 className="w-12 h-12 text-amber-500 mx-auto mb-4 animate-spin" />
|
||||
<p className="text-gray-600">جاري التحميل...</p>
|
||||
<p className="text-gray-600">{t('loading')}</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
@ -74,7 +76,7 @@ export default function NotificationsPage() {
|
||||
className="text-center"
|
||||
>
|
||||
<XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-gray-700 mb-2">خطأ في التحميل</h3>
|
||||
<h3 className="text-xl font-bold text-gray-700 mb-2">{t('loading-error')}</h3>
|
||||
<p className="text-gray-500 mb-4">{error}</p>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
@ -82,7 +84,7 @@ export default function NotificationsPage() {
|
||||
onClick={fetchNotifications}
|
||||
className="px-6 py-2 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors"
|
||||
>
|
||||
إعادة المحاولة
|
||||
{t('retry')}
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -98,9 +100,9 @@ export default function NotificationsPage() {
|
||||
className="flex justify-between items-center mb-8"
|
||||
>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">الإشعارات</h1>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">{t('notifications')}</h1>
|
||||
<p className="text-gray-600">
|
||||
{unreadCount > 0 ? `لديك ${unreadCount} إشعار غير مقروء` : 'جميع الإشعارات مقروءة'}
|
||||
{unreadCount > 0 ? t('unread-notifications', { count: unreadCount }) : t('all-notifications-read')}
|
||||
</p>
|
||||
</div>
|
||||
{unreadCount > 0 && (
|
||||
@ -111,7 +113,7 @@ export default function NotificationsPage() {
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-xl text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all shadow-sm"
|
||||
>
|
||||
<CheckCheck className="w-4 h-4 text-amber-500" />
|
||||
تحديد الكل كمقروء
|
||||
{t('mark-all-read')}
|
||||
</motion.button>
|
||||
)}
|
||||
</motion.div>
|
||||
@ -123,8 +125,8 @@ export default function NotificationsPage() {
|
||||
className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300"
|
||||
>
|
||||
<Bell className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد إشعارات</h3>
|
||||
<p className="text-gray-500">ستظهر هنا الإشعارات المتعلقة بحجوزاتك ومدفوعاتك</p>
|
||||
<h3 className="text-xl font-bold text-gray-700 mb-2">{t('no-notifications')}</h3>
|
||||
<p className="text-gray-500">{t('notifications-empty-hint')}</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
|
||||
Reference in New Issue
Block a user