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.
107 lines
3.2 KiB
107 lines
3.2 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;
|
|
};
|
|
|
|
export function PageHeader({
|
|
className,
|
|
leftButton,
|
|
rightButton,
|
|
enableProfileQuery = true,
|
|
profile: profileProp,
|
|
}: 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
|
|
className={["flex h-[56px] items-center justify-between", className]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
>
|
|
{leftButton?.className?.includes("hidden") ? (
|
|
<div className="size-10 shrink-0" />
|
|
) : (
|
|
<NavigationButton icon="back" profile={profile} {...leftButton} />
|
|
)}
|
|
<h1 className="font-faminela text-[20px] font-normal text-foreground leading-none select-none">
|
|
{t["Habib Marriage"]}
|
|
</h1>
|
|
|
|
{isCustomRightButton ? (
|
|
<NavigationButton
|
|
icon={iconFromProp || "support"}
|
|
profile={profile}
|
|
{...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
|
|
{...rightButtonRest}
|
|
/>
|
|
) : isMale ? (
|
|
<div className="flex items-center gap-2">
|
|
<NavigationButton
|
|
icon="subscription"
|
|
profile={profile}
|
|
iconLabel={t["Subscription Status"] || "Subscription"}
|
|
/>
|
|
<NavigationButton
|
|
icon="support"
|
|
profile={profile}
|
|
iconLabel={t["Support"]}
|
|
{...rightButtonRest}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<NavigationButton
|
|
icon="support"
|
|
profile={profile}
|
|
iconLabel={t["Support"]}
|
|
{...rightButtonRest}
|
|
/>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default PageHeader;
|
|
|