toeasy-front/src/lib/components/ui/PopUpToken.svelte

<script>
	import { goto } from '$app/navigation';

  export let visible = false;
  export let title = 'Seu sessão expirou';
  export let confirmText = 'Retornar';

  function onConfirm() {
    goto('/');
  }

</script>

{#if visible}
  <div
    class="fixed inset-0 z-50 flex items-center justify-center"
    role="dialog"
    aria-modal="true"
    aria-label={title}
  >
    <div
      class="absolute inset-0 bg-black/50"
      role="button"
      tabindex="0"
      aria-label="Fechar aviso"
      on:click={onConfirm}
      on:keydown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onConfirm();
        }
      }}
    ></div>
    <div class="relative bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-lg">
      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">{title}</h3>
        <button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Fechar" on:click={onConfirm}>✕</button>
      </div>

      <div class="p-6 text-sm text-gray-700 dark:text-gray-300">
        <slot>
          Seu sessão expirou, retorne para a tela de login e faça login novamente.
        </slot>
      </div>

      <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-center gap-3">
        <button type="button" class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white" on:click={onConfirm}>{confirmText}</button>
      </div>
    </div>
  </div>
{/if}