Harkamal Randhawa
458ad903db
Move ambient audio into a top-nav toggle that opens a retro floating player while keeping playback running when collapsed.
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { Suspense } from "react";
|
|
|
|
import { AuthButton } from "@/components/auth-button";
|
|
import { EnvVarWarning } from "@/components/env-var-warning";
|
|
import { HabitBrand } from "@/components/layout/habit-brand";
|
|
import { HeaderCoinBalance } from "@/components/layout/header-coin-balance";
|
|
import { HeaderMusicButton } from "@/components/layout/header-music-button";
|
|
import { routes } from "@/lib/routes";
|
|
import { hasEnvVars } from "@/lib/utils";
|
|
|
|
export function SiteHeader() {
|
|
return (
|
|
<header
|
|
className="fixed inset-x-0 top-0 z-40 border-b border-border/50 bg-background"
|
|
style={{
|
|
height: "var(--app-topbar-height)",
|
|
paddingTop: "env(safe-area-inset-top, 0px)",
|
|
}}
|
|
>
|
|
<div className="mx-auto flex h-full w-full max-w-5xl items-center justify-between gap-4 px-5">
|
|
<HabitBrand href={routes.home} size="nav" framed={false} />
|
|
<div className="flex shrink-0 items-center gap-2 sm:gap-3">
|
|
{!hasEnvVars ? (
|
|
<EnvVarWarning />
|
|
) : (
|
|
<>
|
|
<Suspense fallback={null}>
|
|
<HeaderCoinBalance />
|
|
</Suspense>
|
|
<HeaderMusicButton />
|
|
<Suspense fallback={null}>
|
|
<AuthButton />
|
|
</Suspense>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|