Spaces:
Build error
Build error
File size: 3,741 Bytes
c47cf12 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 'use client'
import { useState } from 'react'
import { useApp } from '@/lib/app-context'
export default function Header() {
const { userRole, userName, shortlist, setRole, setUserName } = useApp()
const [showAuth, setShowAuth] = useState(false)
const signIn = (role: 'client'|'vendor'|'admin', name: string) => {
setRole(role)
setUserName(name)
setShowAuth(false)
}
const signOut = () => {
setRole(null)
setUserName(null)
}
return (
<header className="sticky top-0 z-50 bg-ivory-50/80 backdrop-blur-xl border-b border-ivory-200">
<div className="wedding-section">
<div className="flex items-center justify-between h-16">
<a href="/" className="flex items-center gap-2 shrink-0">
<span className="text-2xl">💍</span>
<span className="font-heading text-xl font-semibold text-charcoal-700 tracking-wide">Evermore</span>
</a>
<nav className="hidden md:flex items-center gap-6">
<a href="/search" className="text-sm font-medium text-charcoal-400 hover:text-gold-500 transition-colors">Explore</a>
<a href="/planner" className="text-sm font-medium text-charcoal-400 hover:text-gold-500 transition-colors">Planner</a>
<a href="/contracts" className="text-sm font-medium text-charcoal-400 hover:text-gold-500 transition-colors">Contracts</a>
<a href="/shortlist" className="text-sm font-medium text-charcoal-400 hover:text-gold-500 transition-colors">
Shortlist{shortlist.length > 0 && <span className="ml-1.5 wedding-badge bg-rose-50 text-rose-500 text-xs">{shortlist.length}</span>}
</a>
</nav>
<div className="flex items-center gap-3">
{userRole ? (
<div className="flex items-center gap-3">
<span className="wedding-badge text-xs bg-sage-50 text-sage-600 capitalize">{userRole}</span>
<span className="hidden sm:inline text-sm text-charcoal-600">{userName}</span>
<button onClick={signOut} className="text-xs text-charcoal-400 hover:text-rose-500 transition-colors">Sign Out</button>
</div>
) : (
<button onClick={() => setShowAuth(true)} className="wedding-btn-primary text-sm">Sign In</button>
)}
</div>
</div>
</div>
{/* Auth modal */}
{showAuth && (
<div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4" onClick={() => setShowAuth(false)}>
<div className="wedding-card p-8 max-w-sm w-full" onClick={e => e.stopPropagation()}>
<h2 className="font-heading text-2xl font-semibold text-charcoal-700 mb-2">Demo Sign In</h2>
<p className="text-sm text-charcoal-400 mb-6">Select a role to explore the platform. Auth will be wired to Cognito in production.</p>
<div className="space-y-3">
<button onClick={() => signIn('client', 'Amaya Perera')} className="wedding-btn-primary w-full">
🧑💼 Sign in as Client
</button>
<button onClick={() => signIn('vendor', 'Lens & Light Studio')} className="wedding-btn-gold w-full">
🏪 Sign in as Vendor
</button>
<button onClick={() => signIn('admin', 'Admin User')} className="wedding-btn-outline w-full">
🛡️ Sign in as Admin
</button>
</div>
<p className="text-xs text-charcoal-300 mt-4 text-center">
No password required — this is a demo. Real auth uses OIDC + PKCE with Cognito/Keycloak.
</p>
</div>
</div>
)}
</header>
)
} |