src/lib/components/BucketDataFallback.svelte

<script lang="ts">
	import { browser } from '$app/environment';
	import { DatabaseZapIcon } from '@lucide/svelte';
	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';
</script>

<div
	class="grid place-items-center"
	style="min-height: calc(100svh - var(--app-header-height, 64px) - 4rem);"
>
	<Empty
		title={m.bucket_data_unavailable_title()}
		description={m.bucket_data_unavailable_description()}
	>
		{#snippet icon()}
			<DatabaseZapIcon />
		{/snippet}

		{#snippet content()}
			<div class="flex flex-col items-center gap-4">
				<div class="flex flex-wrap justify-center gap-2">
					<Button
						onclick={() => {
							if (browser) location.reload();
						}}>{m.reload_page()}</Button
					>
					<Button variant="secondary" href={localizeHref('/')}>{m.to_main_page()}</Button>
				</div>
			</div>
		{/snippet}
	</Empty>
</div>