59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { RefreshCcw, Home } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
console.error(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<div className="min-h-[80vh] flex items-center justify-center px-4">
|
|
<div className="text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.5 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-9xl font-extrabold text-slate-200 mb-8"
|
|
>
|
|
500
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2, duration: 0.5 }}
|
|
>
|
|
<h1 className="text-4xl font-bold text-primary mb-4">Etwas ist schiefgelaufen</h1>
|
|
<p className="text-slate-600 text-lg mb-12 max-w-md mx-auto">
|
|
Es gab ein technisches Problem. Wir arbeiten bereits an der Lösung.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<button
|
|
onClick={() => reset()}
|
|
className="btn-accent flex items-center gap-2"
|
|
>
|
|
<RefreshCcw size={18} />
|
|
Erneut versuchen
|
|
</button>
|
|
<Link href="/" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200 flex items-center gap-2">
|
|
<Home size={18} />
|
|
Zur Startseite
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|