54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import Link from "next/link";
|
|
import styles from "./error.module.css";
|
|
import {
|
|
ArrowCounterClockwiseIcon,
|
|
ArrowLeftIcon,
|
|
} from "@phosphor-icons/react/dist/ssr";
|
|
|
|
interface ErrorProps {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}
|
|
|
|
export default function Error({ error, reset }: ErrorProps) {
|
|
useEffect(() => {
|
|
console.error(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<main className={styles.wrapper}>
|
|
<span className={styles.ghost} aria-hidden="true">
|
|
500
|
|
</span>
|
|
|
|
<div className={styles.content}>
|
|
<p className={styles.label}>Serverfehler</p>
|
|
<h1 className={styles.heading}>Etwas ist schiefgelaufen</h1>
|
|
<p className={styles.description}>
|
|
Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es erneut oder
|
|
komm später zurück.
|
|
</p>
|
|
|
|
<div className={styles.actions}>
|
|
<button
|
|
type="button"
|
|
onClick={reset}
|
|
className={`btn btn--filled ${styles.cta}`}
|
|
>
|
|
<ArrowCounterClockwiseIcon className="btn-icon" size={18} />
|
|
Erneut versuchen
|
|
</button>
|
|
|
|
<Link href="/" className={`btn btn--outline ${styles.cta}`}>
|
|
<ArrowLeftIcon className="btn-icon" size={18} />
|
|
Zurück zur Startseite
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|