counter/src/lib/component/PopUp.svelte

<script>
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';
	import { tokenValidation } from '$lib/utils/store';

	$: showPopup = $tokenValidation;

	function returnLogin() {
		goto('/login');
	}
</script>

{#if showPopup}
	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
		<div class="w-full max-w-md space-y-6 rounded-2xl bg-white p-8 text-center shadow-lg">
			<h1 class="text-xl font-semibold text-gray-800">Token expirado</h1>
			<p class="text-gray-600">
				Sua sessão expirou. Retorne ao login para realizar a validação novamente.
			</p>
			<button
				onclick={returnLogin}
				class="rounded-lg bg-red-400 px-6 py-2 text-white transition duration-300 hover:bg-red-600"
			>
				Voltar ao login
			</button>
		</div>
	</div>
{/if}