109 lines
4 KiB
TypeScript
109 lines
4 KiB
TypeScript
import { Link, useNavigate } from 'react-router-dom';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { Home, ArrowLeft, Search, Music, Library, TrendingUp } from 'lucide-react';
|
|
|
|
/**
|
|
* FE-PAGE-018: Improved 404 error page with helpful messages and recovery actions
|
|
*/
|
|
function NotFoundPage() {
|
|
const navigate = useNavigate();
|
|
|
|
const quickLinks = [
|
|
{ to: '/dashboard', label: 'Dashboard', icon: Home },
|
|
{ to: '/library', label: 'Ma bibliothèque', icon: Library },
|
|
{ to: '/search', label: 'Rechercher', icon: Search },
|
|
{ to: '/marketplace', label: 'Marketplace', icon: TrendingUp },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
|
<div className="w-full max-w-2xl">
|
|
<Card className="text-center">
|
|
<CardHeader>
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
|
|
<Search className="h-8 w-8 text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<CardTitle className="text-2xl">Page non trouvée</CardTitle>
|
|
<CardDescription>
|
|
La page que vous recherchez n'existe pas ou a été déplacée.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="text-6xl font-bold text-gray-300 dark:text-gray-700">
|
|
404
|
|
</div>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
Il semble que vous ayez suivi un lien cassé ou tapé une URL
|
|
incorrecte. Voici quelques options pour continuer :
|
|
</p>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<Button asChild className="flex-1">
|
|
<Link to="/dashboard">
|
|
<Home className="mr-2 h-4 w-4" />
|
|
Retour au dashboard
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => window.history.back()}
|
|
className="flex-1"
|
|
>
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Page précédente
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<div className="border-t pt-4">
|
|
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
|
Liens rapides :
|
|
</p>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
|
{quickLinks.map((link) => {
|
|
const Icon = link.icon;
|
|
return (
|
|
<Button
|
|
key={link.to}
|
|
variant="outline"
|
|
size="sm"
|
|
asChild
|
|
className="flex flex-col h-auto py-2"
|
|
>
|
|
<Link to={link.to}>
|
|
<Icon className="h-4 w-4 mb-1" />
|
|
<span className="text-xs">{link.label}</span>
|
|
</Link>
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Helpful Suggestions */}
|
|
<div className="border-t pt-4 text-left">
|
|
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Suggestions :
|
|
</p>
|
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-disc list-inside">
|
|
<li>Vérifiez l'orthographe de l'URL</li>
|
|
<li>Utilisez la recherche pour trouver ce que vous cherchez</li>
|
|
<li>Consultez votre bibliothèque ou le marketplace</li>
|
|
<li>Contactez le support si le problème persiste</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
export default NotFoundPage;
|