<div class="p-4">
	<div class="mb-6">
		<h2 class="text-3xl font-bold">notifications</h2>
		<div class="mt-2 flex gap-2">
			<div class="h-1 w-8 rounded-full bg-(--nucleus-accent)"></div>
			<div class="h-1 w-9.5 rounded-full bg-(--nucleus-accent2)"></div>
		</div>
	</div>

	<div
		class="flex h-64 items-center justify-center rounded-sm border-2 border-dashed border-(--nucleus-fg)/10"
	>
		<div class="text-center">
			<div class="mb-4 text-6xl opacity-50">🚧</div>
			<h3 class="text-xl font-bold opacity-80">todo</h3>
		</div>
	</div>
</div>
