src/lib/components/BucketDataWarning.svelte

<script lang="ts">
	import { AlertTriangleIcon } from '@lucide/svelte';
	import { m } from '$lib/paraglide/messages';
</script>

<div
	class="mb-6 flex flex-col gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-900 dark:text-amber-100"
	role="status"
>
	<div class="flex items-center gap-2 font-semibold">
		<AlertTriangleIcon class="size-4 shrink-0" />
		{m.bucket_data_stale_title()}
	</div>
	<p class="text-amber-900/80 dark:text-amber-100/80">
		{m.bucket_data_stale_description()}
	</p>
</div>