frontend/src/lib/components/Navbar.svelte

<script>
  export let isLoggedIn = false;
  export let username = '';
  export let handleAuthAction = () => {};
  export let flashButton = false;
  export let pageTitle = 'HFStudio';
</script>

<!-- Top navbar -->
<div class="flex items-center justify-between px-4 py-4 border-b border-gray-200 min-h-[73px]">
  <!-- Logo/Title -->
  <div class="flex items-center gap-2">
    <span class="font-semibold text-gray-900">{pageTitle}</span>
  </div>

  <!-- Sign in button -->
  <button
    on:click={handleAuthAction}
    disabled={false}
    class="px-4 py-2 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition-colors shadow-sm flex items-center justify-center gap-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed relative overflow-hidden"
  >
    {#if flashButton}
      <div
        class="absolute inset-0 -left-full animate-sweep bg-gradient-to-r from-transparent via-orange-400/40 to-transparent"
      ></div>
    {/if}
    {#if isLoggedIn}
      <span class="relative z-10">👋 Logout, {username}</span>
    {:else}
      <img src="/assets/hf-logo.png" alt="HF Logo" class="w-4 h-4 relative z-10" />
      <span class="relative z-10">Sign In</span>
    {/if}
  </button>
</div>