You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
4.0 KiB
120 lines
4.0 KiB
"use client";
|
|
|
|
import { useI18n } from "@/translations/provider";
|
|
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
|
|
import {
|
|
NavigationButton,
|
|
type NavigationButtonProps,
|
|
} from "./navigation-button";
|
|
import { hasSupportAccess } from "./support-access";
|
|
|
|
type PageHeaderProps = {
|
|
className?: string;
|
|
/** Props for the left button. Defaults to icon="back". */
|
|
leftButton?: NavigationButtonProps;
|
|
/** Props for the right button. Defaults to icon="support" with support label. */
|
|
rightButton?: NavigationButtonProps;
|
|
/**
|
|
* When false, skip the profile query entirely. Useful on pages where the
|
|
* right button has an explicit onClick and no icon resolution is needed
|
|
* (e.g. Intro's "support" icon that opens a report sheet).
|
|
* Defaults to true.
|
|
*/
|
|
enableProfileQuery?: boolean;
|
|
profile?: any;
|
|
/**
|
|
* When true, header stays fixed/sticky at the top with Flutter native toolbar height (56px),
|
|
* safe area top padding, and frosted backdrop blur during scroll.
|
|
*/
|
|
sticky?: boolean;
|
|
};
|
|
|
|
export function PageHeader({
|
|
className,
|
|
leftButton,
|
|
rightButton,
|
|
enableProfileQuery = true,
|
|
profile: profileProp,
|
|
sticky = false,
|
|
}: PageHeaderProps) {
|
|
const { dictionary: t } = useI18n();
|
|
|
|
// Only fetch profile when needed for icon resolution (subscription/support
|
|
// visibility depends on profile data). Pages that pass an explicit onClick
|
|
// for the right button can set enableProfileQuery=false to avoid an
|
|
// unnecessary API call (e.g. anonymous Intro).
|
|
const iconFromProp = rightButton?.icon;
|
|
const isCustomRightButton =
|
|
!!rightButton?.onClick ||
|
|
(iconFromProp !== undefined &&
|
|
iconFromProp !== "subscription" &&
|
|
iconFromProp !== "support");
|
|
|
|
const needsProfile =
|
|
enableProfileQuery && !rightButton?.onClick && !profileProp;
|
|
|
|
const { data: queriedProfile } = useMarriageProfileQuery({
|
|
enabled: needsProfile,
|
|
});
|
|
|
|
const profile = profileProp !== undefined ? profileProp : queriedProfile;
|
|
const isMale = profile?.gender === "male";
|
|
const { icon: rightButtonIcon, ...rightButtonRest } = rightButton || {};
|
|
|
|
return (
|
|
<header
|
|
style={sticky ? {
|
|
marginInline: "calc(-1 * var(--app-shell-px, 17px))",
|
|
paddingInline: "var(--app-shell-px, 17px)",
|
|
} : undefined}
|
|
className={[
|
|
sticky
|
|
? "sticky top-0 z-30 pt-[max(12px,calc(var(--safe-top)+6px))] bg-[#F5F5F5] dark:bg-[#1A1A1A] bg-[url('/assets/images/home-Checkups-List.svg')] bg-top bg-no-repeat bg-cover"
|
|
: "pb-3 pt-[max(8px,calc(var(--safe-top)+4px))]",
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
>
|
|
<div className="relative flex h-[56px] w-full max-w-[834px] mx-auto items-center justify-between">
|
|
{leftButton?.className?.includes("hidden") ? (
|
|
<div className="size-10 shrink-0" />
|
|
) : (
|
|
<NavigationButton icon="back" profile={profile} {...leftButton} />
|
|
)}
|
|
|
|
<h1 className="pointer-events-none absolute left-1/2 -translate-x-1/2 font-faminela text-[20px] font-normal text-foreground text-center truncate max-w-[60%]">
|
|
{t["Habib Marriage"]}
|
|
</h1>
|
|
|
|
{isCustomRightButton ? (
|
|
<NavigationButton
|
|
icon={iconFromProp || "more"}
|
|
profile={profile}
|
|
{...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
|
|
{...rightButtonRest}
|
|
/>
|
|
) : (
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
{isMale && (
|
|
<NavigationButton
|
|
icon="subscription"
|
|
profile={profile}
|
|
iconLabel={(t as Record<string, string>)["Subscription Status"] || (t as Record<string, string>)["Subscription"] || "Subscription"}
|
|
/>
|
|
)}
|
|
<NavigationButton
|
|
icon="more"
|
|
profile={profile}
|
|
iconLabel={(t as Record<string, string>)["More"] || "More"}
|
|
{...rightButtonRest}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default PageHeader;
|
|
|