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.
101 lines
3.5 KiB
101 lines
3.5 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { FaPen } from "react-icons/fa6";
|
|
import AdvisorActionsCard from "@/components/ui/advisor-actions-card";
|
|
import NavigationButton from "@/components/ui/navigation-button";
|
|
import { PageBackground } from "@/components/utils/page-background";
|
|
import { useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
|
|
import { localizePath } from "@/translations/config";
|
|
import { useI18n } from "@/translations/provider";
|
|
import { getSubmitPath } from "@/lib/get-submit-path";
|
|
|
|
const advisorAvatars = [
|
|
{ id: "advisor-primary", src: "/assets/images/Avatar Image.png" },
|
|
{ id: "advisor-secondary", src: "/assets/images/Ellipse 370.png" },
|
|
{ id: "advisor-tertiary", src: "/assets/images/Avatar Image.png" },
|
|
];
|
|
|
|
export default function FindingMatchPage() {
|
|
const router = useRouter();
|
|
const { dictionary: t, locale } = useI18n();
|
|
const { data: profile } = useMarriageProfileQuery({
|
|
refetchInterval: 3000,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!profile) {
|
|
return;
|
|
}
|
|
const targetPath = getSubmitPath(profile);
|
|
if (targetPath !== "/finding-match") {
|
|
router.replace(localizePath(targetPath, locale));
|
|
}
|
|
}, [profile, locale, router]);
|
|
|
|
const copy = t.findingMatch;
|
|
const matchImageSrc =
|
|
profile?.gender === "female"
|
|
? "/assets/images/Group 15978fdsa80467.svg"
|
|
: "/assets/images/Group 159788fd0467.svg";
|
|
|
|
return (
|
|
<>
|
|
<PageBackground />
|
|
|
|
<main
|
|
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 group-16">{t.common.appName}</h1>
|
|
<NavigationButton icon="subscription" iconLabel="Subscribe" />
|
|
</header>
|
|
|
|
<section className="flex flex-1 flex-col items-center mt-32">
|
|
<div className="relative h-[124px] w-[130px]" aria-hidden="true">
|
|
<Image
|
|
src={matchImageSrc}
|
|
alt=""
|
|
fill
|
|
sizes="58px"
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<h1 className="mt-5 group-16 font-bold leading-none tracking-[0.02em] text-[#171717] uppercase">
|
|
{copy.title}
|
|
</h1>
|
|
|
|
<p className="mt-3 max-w-[320px] group-12 leading-[1.35] font-semibold text-[#747474]">
|
|
{copy.description}
|
|
</p>
|
|
</section>
|
|
|
|
<AdvisorActionsCard
|
|
title={copy.advisorTitle}
|
|
description={copy.advisorDescription}
|
|
avatars={advisorAvatars}
|
|
extraCount={7}
|
|
getAdvisorLabel={copy.getAdvisor}
|
|
getAdvisorHref="/questions-list"
|
|
/>
|
|
|
|
<Link
|
|
className="inline-flex mt-3.5 w-full cursor-pointer items-center justify-center rounded-[9px] border-none bg-[#2B2C31] bg-none px-4 py-[17px] text-center text-white shadow-none transition-opacity"
|
|
href={localizePath("/questions-list", locale)}
|
|
>
|
|
<span className="flex min-w-0 items-center justify-center gap-2 text-center group-16 leading-none font-semibold">
|
|
<FaPen aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
|
|
<span>{copy.editProfile}</span>
|
|
</span>
|
|
</Link>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|