src/lib/components/Auth/AuthBanner.svelte

<script lang="ts">
  interface Props {
    message?: string;
    visible?: boolean;
  }
  
  let { message = "", visible = false }: Props = $props();
</script>

{#if visible && message}
  <div class="banner">
    {message}
  </div>
{/if}

<style>
  .banner {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
  }
</style>