karti
9db53cb36f
Replace the stacked sign-in card with a responsive public shell, a local monochrome compute field, restrained grain and reduced-motion-safe drift. Share the anonymous header with Learn so public navigation stays consistent, and carry the corrected spacing through registration and profile setup.
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
/**
|
|
* The small amount of chrome shared by every public PIG screen.
|
|
*
|
|
* These routes deliberately live outside the authenticated Shell, but they
|
|
* should still feel like the same product. Keeping the wordmark, Learn link,
|
|
* sign-in affordance and music control here prevents the auth and shared
|
|
* Learn pages from drifting into separate mini-sites.
|
|
*/
|
|
import { AudioControl } from './AudioControl';
|
|
import { PiggyLogo } from './PiggyMark';
|
|
import { cn } from './ui';
|
|
|
|
type PublicDestination = 'learn' | 'sign-in';
|
|
|
|
export function PublicHeader({
|
|
current,
|
|
onSignIn,
|
|
}: {
|
|
current?: PublicDestination;
|
|
onSignIn?: () => void;
|
|
}) {
|
|
const itemClass = (destination: PublicDestination) =>
|
|
cn(
|
|
'tap relative inline-flex items-center px-2 text-sm font-medium transition-colors',
|
|
current === destination ? 'text-fg' : 'text-muted hover:text-fg',
|
|
current === destination &&
|
|
'after:absolute after:inset-x-2 after:bottom-1 after:h-px after:bg-current',
|
|
);
|
|
|
|
return (
|
|
<header className="public-header relative z-30 border-b border-border/70 bg-bg/80 backdrop-blur-xl">
|
|
<div className="mx-auto flex h-16 w-full min-w-0 max-w-7xl items-center gap-2 px-4 sm:px-6 lg:px-8">
|
|
<a href="/" className="tap flex shrink-0 items-center rounded-lg" aria-label="PIG home">
|
|
<PiggyLogo />
|
|
</a>
|
|
|
|
<nav aria-label="Public navigation" className="ml-auto flex shrink-0 items-center gap-1">
|
|
<a
|
|
href="/learn"
|
|
aria-current={current === 'learn' ? 'page' : undefined}
|
|
className={itemClass('learn')}
|
|
>
|
|
Learn
|
|
</a>
|
|
<AudioControl className="public-header-audio" />
|
|
{onSignIn ? (
|
|
<button type="button" onClick={onSignIn} className={itemClass('sign-in')}>
|
|
Sign in
|
|
</button>
|
|
) : current === 'sign-in' ? (
|
|
<span aria-current="page" className={itemClass('sign-in')}>
|
|
Sign in
|
|
</span>
|
|
) : (
|
|
<a href="/" className={itemClass('sign-in')}>
|
|
Sign in
|
|
</a>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|