tabler/shared/layouts/ErrorLayout.astro

---
// Error page: border-top banner, centered Empty from errors.json (`pageError`).
import BaseLayout from './BaseLayout.astro';
import Empty from '@ui/Empty.astro';
import errors from '@data/errors.json';

interface Props {
	title?: string;
	/** page-error front matter — key into errors.json ("404" | "500" | "maintenance" | …) */
	pageError: string;
}

const { title, pageError } = Astro.props;

type ErrorEntry = {
	illustration?: string;
	title?: string | number;
	header?: string;
	description?: string;
};

const error = (errors as Record<string, ErrorEntry>)[pageError] ?? {};
const header = error.header ?? 'Oops… You just found an error page';
---

<BaseLayout title={title} bodyClass="border-top-wide border-primary">
	<!-- BEGIN PAGE BODY -->
	<div class="page page-center">
		<div class="container-tight py-4">
			<Empty
				icon="settings"
				illustration={error.illustration}
				iconText={error.title != null ? String(error.title) : undefined}
				title={header}
				subtitle={error.description}
				buttonIcon="arrow-left"
				buttonText="Take me home"
			/>
		</div>
	</div>
	<!-- END PAGE BODY -->
</BaseLayout>