78 lines
3.9 KiB
TypeScript
78 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { useUser } from '@/components/UserProvider';
|
|
import { ShieldAlert, Mail, ArrowLeft, LogOut } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export default function SuspendedPage() {
|
|
const { user, logout } = useUser();
|
|
const router = useRouter();
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
router.push('/');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
|
|
<div className="max-w-md w-full bg-white rounded-2xl shadow-xl border border-rose-100 overflow-hidden">
|
|
<div className="bg-rose-600 p-8 flex flex-col items-center text-white text-center">
|
|
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
|
|
<ShieldAlert className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold mb-2">Compte Suspendu</h1>
|
|
<p className="text-rose-100 text-sm">
|
|
Votre accès aux fonctionnalités de la plateforme a été restreint.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-8 space-y-6">
|
|
<div>
|
|
<h2 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Motif de la suspension</h2>
|
|
<div className="bg-slate-50 border border-slate-100 rounded-xl p-4 text-slate-700 italic text-sm leading-relaxed">
|
|
"{user?.suspensionReason || "Non respect des conditions générales d'utilisation ou comportement inapproprié constaté par la modération."}"
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-slate-600">
|
|
Si vous pensez qu'il s'agit d'une erreur ou si vous souhaitez contester cette décision, vous pouvez contacter notre équipe de modération.
|
|
</p>
|
|
|
|
<div className="flex items-center gap-3 p-4 bg-indigo-50 rounded-xl border border-indigo-100">
|
|
<Mail className="w-5 h-5 text-indigo-600" />
|
|
<div>
|
|
<p className="text-xs font-bold text-indigo-900 uppercase">Support Direct</p>
|
|
<p className="text-sm text-indigo-700">moderation@afrohub.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 pt-4 border-t border-slate-100">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-slate-900 text-white rounded-xl font-bold text-sm hover:bg-slate-800 transition-all shadow-lg active:scale-95"
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
Se déconnecter
|
|
</button>
|
|
|
|
<Link href="/" className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-white text-slate-600 rounded-xl font-bold text-sm hover:bg-slate-50 transition-all border border-slate-200">
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Retour à l'accueil
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 bg-slate-50 border-t border-slate-100 text-center">
|
|
<p className="text-[10px] text-slate-400">
|
|
Date de suspension : {new Date().toLocaleDateString('fr-FR')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|