src/lib/components/errors/Error404.svelte

<script lang="ts">
	import { browser } from '$app/environment';
	import Empty from '$lib/components/Empty.svelte';
	import { Button } from '$lib/components/ui/button';
	import { m } from '$lib/paraglide/messages';
	import { localizeHref } from '$lib/paraglide/runtime';
	import { FolderCodeIcon } from '@lucide/svelte';
</script>

<Empty title={m.not_found()} description={m.the_page_youre_looking_for_doesnt_exist()}>
	{#snippet icon()}
		<FolderCodeIcon />
	{/snippet}
	{#snippet content()}
		<div class="flex gap-2">
			<Button
				onclick={() => {
					if (browser) window.history.back();
				}}
				>{m.go_back()}
			</Button>
			<Button variant="secondary" href={localizeHref('/')}>{m.to_main_page()}</Button>
		</div>
	{/snippet}
</Empty>