language-learning-app/frontend/src/routes/app/+layout.svelte

<script lang="ts">
	import TopNav from '$lib/components/TopNav.svelte';
	import type { LayoutProps } from './$types';

	const { data, children }: LayoutProps = $props();
</script>

<TopNav />

{#if data.emailUnverified}
	<div class="email-warning" role="alert">
		Your email address is not yet verified. Check your inbox for a verification link.
	</div>
{/if}

{@render children()}

<style>
	.email-warning {
		background-color: var(--color-surface-container-high);
		color: var(--color-primary);
		font-family: var(--font-label);
		font-size: var(--text-label-md);
		font-weight: var(--weight-medium);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		text-align: center;
		padding: var(--space-2) var(--space-5);
		width: 100%;
	}
</style>