// src/components/AppHeader/AppHeader.tsx import type { ReactNode } from "react"; import { Icon } from "../Icon/Icon"; import styles from "./AppHeader.module.css"; export type HeaderLinkProps = { href: string; active?: boolean; /** Renders the dropdown caret (Categories, News). */ caret?: boolean; /** The attached panel is open; wears the accent like active. */ open?: boolean; children: ReactNode; }; /** Nav link: secondary at rest, white on hover, accent when current or open. */ export function HeaderLink({ href, active = false, caret = false, open = false, children }: HeaderLinkProps) { return ( {children} {caret && } ); } /** The vertical rule between the primary and secondary nav groups. */ export function HeaderNavDivider() { return ; } export type HeaderPremiumProps = { /** Trial-eligible users read "Try free"; everyone else "Go". */ offer: "try-free" | "go"; onClick?: () => void; }; /** The crown upsell chip. Never shown to premium members. */ export function HeaderPremium({ offer, onClick }: HeaderPremiumProps) { return ( ); } export type HeaderUserProps = { /** Avatar (logged in) — omit for the logged-out placeholder. */ avatar?: ReactNode; /** Unread dot on the avatar corner. */ badge?: boolean; open?: boolean; label?: string; onClick?: () => void; }; /** The avatar trigger that opens the user menu. */ export function HeaderUser({ avatar, badge = false, open = false, label = "Account", onClick }: HeaderUserProps) { return ( ); } export type AppHeaderProps = { /** The logo lockup, linked home. */ logo: ReactNode; /** HeaderLink items (with HeaderNavDivider between the groups). */ children?: ReactNode; /** HeaderPremium / search / watchlist / HeaderUser cluster. */ trailing?: ReactNode; /** Centered logo only — auth and checkout flows. */ minimal?: boolean; /** Session still resolving: nav hidden, icon cluster skeletonned. */ loading?: boolean; label?: string; }; /** The site bar. One per page; the mega/user menus compose Menu blocks. */ export function AppHeader({ logo, children, trailing, minimal = false, loading = false, label = "Primary" }: AppHeaderProps) { if (minimal) { return (

{logo}

); } return (

{logo} {loading ? ( <>

) : ( <>

{trailing}

)}

); } export type HeaderIconButtonProps = { icon: Parameters[0]["name"]; label: string; active?: boolean; onClick?: () => void; /** NotificationBadge overlays the corner. */ badge?: ReactNode; }; export function HeaderIconButton({ icon, label, active = false, onClick, badge }: HeaderIconButtonProps) { return ( ); }