From f5363c070314180eb5af8fd8a4070d11b3ac8c89 Mon Sep 17 00:00:00 2001
From: ghorbani <muhammadamin.ghorbani@gmail.com>
Date: Wed, 5 Aug 2026 15:55:33 +0330
Subject: [PATCH] feat: add request-sent, candidate-contact, finding-match,
 intro, new-match, and request-accepted pages with a reusable page-header
 component.

---
 src/app/candidate-contact/page.tsx         | 14 ++-----
 src/app/finding-match/page.tsx             | 11 +++---
 src/app/intro/page.tsx                     | 17 ++++----
 src/app/new-match/page.tsx                 |  8 +---
 src/app/request-accepted/page.tsx          |  8 +---
 src/app/request-sent/page.tsx              |  8 +---
 src/components/Componentes/page-header.tsx | 46 ++++++++++++++++++++++
 7 files changed, 67 insertions(+), 45 deletions(-)
 create mode 100644 src/components/Componentes/page-header.tsx

diff --git a/src/app/candidate-contact/page.tsx b/src/app/candidate-contact/page.tsx
index 6776fb1..c477409 100644
--- a/src/app/candidate-contact/page.tsx
+++ b/src/app/candidate-contact/page.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import { DotsLoader } from "@/components/Componentes/button";
 import CallResultSheet from "@/components/Componentes/call-result-sheet";
 import DismissReasonSheet from "@/components/Componentes/dismiss-reason-sheet";
-import NavigationButton from "@/components/Componentes/navigation-button";
+import PageHeader from "@/components/Componentes/page-header";
 import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
 import { PageBackground } from "@/components/Componentes/page-background";
 import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
@@ -109,11 +109,7 @@ export default function CandidateContactPage() {
         ) : null}
 
         <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(16px,calc(var(--safe-top)+8px))] pb-[calc(20px+var(--safe-bottom))]">
-          <header className="-mx-[6px] flex items-center justify-between pb-3">
-            <NavigationButton icon="back" className="rounded-full w-10 h-10 flex items-center justify-center p-0 shadow-xs" />
-            <h1 className="font-faminela text-[20px] font-bold text-[#111111]">{t.common.appName}</h1>
-            <NavigationButton icon="support" iconLabel={t.common.support} className="rounded-full w-10 h-10 flex items-center justify-center p-0 shadow-xs" />
-          </header>
+          <PageHeader className="-mx-[6px]" />
 
           <div className="flex flex-1 flex-col justify-between gap-6 pt-4">
             <section className="flex flex-col items-center">
@@ -232,11 +228,7 @@ export default function CandidateContactPage() {
       ) : null}
 
       <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-[max(16px,calc(var(--safe-top)+8px))] pb-36">
-        <header className="flex items-center justify-between pb-3">
-          <NavigationButton icon="back" />
-          <h1 className="font-faminela">{t.common.appName}</h1>
-          <NavigationButton icon="support" iconLabel={t.common.support} />
-        </header>
+        <PageHeader />
 
         <section className="flex flex-1 items-center justify-center">
           <div className="flex max-w-[300px] flex-col items-center">
diff --git a/src/app/finding-match/page.tsx b/src/app/finding-match/page.tsx
index 1c9cd1c..8d60aa7 100644
--- a/src/app/finding-match/page.tsx
+++ b/src/app/finding-match/page.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { FaLock, FaPen } from "react-icons/fa6";
 import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
-import NavigationButton from "@/components/Componentes/navigation-button";
+import PageHeader from "@/components/Componentes/page-header";
 import { PageBackground } from "@/components/Componentes/page-background";
 import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
 import { getSubmitPath } from "@/lib/get-submit-path";
@@ -47,11 +47,10 @@ export default function FindingMatchPage() {
         style={{ paddingBottom: "calc(20px + var(--safe-bottom))" }}
         className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(16px,calc(var(--safe-top)+8px))] text-center"
       >
-        <header className="-mx-[6px] flex items-center justify-between pb-3">
-          <NavigationButton icon="back" />
-          <h1 className="font-faminela text-[20px]">{t.common.appName}</h1>
-          <NavigationButton icon="subscription" iconLabel="Subscribe" />
-        </header>
+        <PageHeader
+          className="-mx-[6px]"
+          rightButton={{ icon: "subscription", iconLabel: "Subscribe" }}
+        />
 
         <section className="flex flex-1 flex-col items-center mt-20">
           <div className="relative h-[124px] w-[130px]" aria-hidden="true">
diff --git a/src/app/intro/page.tsx b/src/app/intro/page.tsx
index 1b1b586..676d221 100644
--- a/src/app/intro/page.tsx
+++ b/src/app/intro/page.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import Button from "@/components/Componentes/button";
-import NavigationButton from "@/components/Componentes/navigation-button";
+import PageHeader from "@/components/Componentes/page-header";
 import ReportActionsSheet from "@/components/Componentes/report-actions-sheet";
 import type { MarriageProfileResponse } from "@/hooks/marriage/types";
 import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
@@ -138,15 +138,12 @@ export default function Intro() {
       {isReportSheetOpen && (
         <ReportActionsSheet onClose={() => setIsReportSheetOpen(false)} />
       )}
-      <header className="flex items-center justify-between pb-3">
-        <NavigationButton icon="back" />
-        <h1 className="font-faminela group-16">{t.common.appName}</h1>
-        <NavigationButton
-          icon="support"
-          iconLabel={t.common.support}
-          onClick={() => setIsReportSheetOpen(true)}
-        />
-      </header>
+      <PageHeader
+        rightButton={{
+          icon: "support",
+          onClick: () => setIsReportSheetOpen(true),
+        }}
+      />
       <main className="pb-[calc(90px+var(--safe-bottom))]">
         <div className="flex flex-col items-center mt-16">
           <Image
diff --git a/src/app/new-match/page.tsx b/src/app/new-match/page.tsx
index 8be1c90..48764fe 100644
--- a/src/app/new-match/page.tsx
+++ b/src/app/new-match/page.tsx
@@ -7,7 +7,7 @@ import { useEffect, useMemo, useState } from "react";
 import { FaLock } from "react-icons/fa6";
 import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
 import { DotsLoader } from "@/components/Componentes/button";
-import NavigationButton from "@/components/Componentes/navigation-button";
+import PageHeader from "@/components/Componentes/page-header";
 import { PageBackground } from "@/components/Componentes/page-background";
 import { IoClose } from "react-icons/io5";
 import { useHabcoinPaymentMutation } from "@/hooks/marriage/use-habcoin-payment";
@@ -300,11 +300,7 @@ export default function NewMatchPage() {
         }}
         className="-mx-[17px] min-h-screen h-full text-center px-4"
       >
-        <header className="flex items-center justify-between pb-3">
-          <NavigationButton icon="back" />
-          <h1 className="font-faminela">{t.common.appName}</h1>
-          <NavigationButton icon="support" iconLabel={t.common.support} />
-        </header>
+        <PageHeader />
 
         <div className="">
           <section className="flex flex-col items-center mt-9">
diff --git a/src/app/request-accepted/page.tsx b/src/app/request-accepted/page.tsx
index 32f1986..4ba05f7 100644
--- a/src/app/request-accepted/page.tsx
+++ b/src/app/request-accepted/page.tsx
@@ -8,7 +8,7 @@ import { DotsLoader } from "@/components/Componentes/button";
 import CallResultSheet from "@/components/Componentes/call-result-sheet";
 import DismissReasonSheet from "@/components/Componentes/dismiss-reason-sheet";
 import FemaleConsentSheet from "@/components/Componentes/female-consent-sheet";
-import NavigationButton from "@/components/Componentes/navigation-button";
+import PageHeader from "@/components/Componentes/page-header";
 import { PageBackground } from "@/components/Componentes/page-background";
 import SubscriptionRequiredSheet from "@/components/Componentes/subscription-required-sheet";
 import type {
@@ -317,11 +317,7 @@ export default function RequestAcceptedPage() {
       ) : null}
 
       <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(16px,calc(var(--safe-top)+8px))] pb-[calc(20px+var(--safe-bottom))] text-center">
-        <header className="-mx-[6px] flex items-center justify-between pb-3">
-          <NavigationButton icon="back" />
-          <h1 className="font-faminela group-16">{t.common.appName}</h1>
-          <NavigationButton icon="support" iconLabel={t.common.support} />
-        </header>
+        <PageHeader className="-mx-[6px]" />
 
         <div className="flex flex-1 flex-col justify-between gap-6 pt-4">
           <section className="flex flex-col items-center">
diff --git a/src/app/request-sent/page.tsx b/src/app/request-sent/page.tsx
index 3379811..bb68772 100644
--- a/src/app/request-sent/page.tsx
+++ b/src/app/request-sent/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
-import NavigationButton from "@/components/Componentes/navigation-button";
+import PageHeader from "@/components/Componentes/page-header";
 import { PageBackground } from "@/components/Componentes/page-background";
 import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
 import { getSubmitPath } from "@/lib/get-submit-path";
@@ -52,11 +52,7 @@ export default function RequestSentPage() {
         style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }}
         className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(16px,calc(var(--safe-top)+8px))] text-center"
       >
-        <header className="-mx-[6px] flex items-center justify-between pb-3">
-          <NavigationButton icon="back" />
-          <h1 className="font-faminela group-16">{t.common.appName}</h1>
-          <NavigationButton icon="support" iconLabel={t.common.support} />
-        </header>
+        <PageHeader className="-mx-[6px]" />
 
         <div className="flex flex-1 flex-col justify-between gap-20 pt-[109px]">
           <section className="flex flex-col items-center">
diff --git a/src/components/Componentes/page-header.tsx b/src/components/Componentes/page-header.tsx
new file mode 100644
index 0000000..49b91de
--- /dev/null
+++ b/src/components/Componentes/page-header.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useI18n } from "@/translations/provider";
+import {
+  NavigationButton,
+  type NavigationButtonProps,
+} from "./navigation-button";
+
+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;
+};
+
+export function PageHeader({
+  className,
+  leftButton,
+  rightButton,
+}: PageHeaderProps) {
+  const { dictionary: t } = useI18n();
+
+  return (
+    <header
+      className={[
+        "flex items-center justify-between pb-3",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <NavigationButton icon="back" {...leftButton} />
+      <h1 className="font-faminela text-[20px] font-normal text-foreground">
+        {t.common.appName}
+      </h1>
+      <NavigationButton
+        icon="support"
+        iconLabel={t.common.support}
+        {...rightButton}
+      />
+    </header>
+  );
+}
+
+export default PageHeader;