error.vue

<template>
	<div class="space-y-10 h-screen flex flex-col items-center justify-center">
		<div class="flex items-center justify-center">
			<div class="py-4 px-6 border-r-2 border-white/10">
				<h1 class="text-9xl font-bold">{{ error.statusCode }}</h1>
			</div>
			<h1 class="mx-4 text-4xl font-light">{{ error.message }}</h1>
		</div>
		<button
			class="p-4 rounded-lg border border-black/10 dark:border-white/10 bg-gradient-to-tr from-black/5 to-black/5 hover:bg-black/10 dark:from-white/5 dark:to-white/5 transition-all dark:hover:bg-white/10"
			@click="clearError({ redirect: '/' })"
		>
			Return To Homepage
		</button>
	</div>
</template>

<script setup>
defineProps(["error"]);

useHead({
	title: "Error"
});
</script>