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.
 
 
 
 

67 lines
2.4 KiB

"use client";
import Image from "next/image";
import { useState } from "react";
import Button from "@/components/ui/button";
import CallResultSheet from "@/components/ui/call-result-sheet";
import DismissReasonSheet from "@/components/ui/dismiss-reason-sheet";
import NavigationButton from "@/components/ui/navigation-button";
import { useI18n } from "@/i18n/provider";
export default function CandidateContactPage() {
const { dictionary: t } = useI18n();
const [isCallResultSheetOpen, setIsCallResultSheetOpen] = useState(false);
const [isDismissReasonSheetOpen, setIsDismissReasonSheetOpen] =
useState(false);
return (
<>
{isCallResultSheetOpen ? (
<CallResultSheet
onClose={() => setIsCallResultSheetOpen(false)}
onOtherReasonsClick={() => setIsDismissReasonSheetOpen(true)}
/>
) : null}
{isDismissReasonSheetOpen ? (
<DismissReasonSheet
onClose={() => setIsDismissReasonSheetOpen(false)}
/>
) : null}
<main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-10 pb-36">
<header className="flex items-center justify-between">
<NavigationButton icon="back" />
<h1 className="font-faminela">{t.common.appName}</h1>
<NavigationButton icon="support" iconLabel={t.common.support} />
</header>
<section className="flex flex-1 items-center justify-center">
<div className="flex max-w-[300px] flex-col items-center">
<Image
src="/assets/images/Group 1597880467.svg"
alt={t.candidateContact.imageAlt}
width={131}
height={125}
/>
<h1 className="mt-10 text-center text-[18px] leading-[1.2] font-bold text-[#1A1A1A]">
{t.candidateContact.title}
</h1>
</div>
</section>
<section
style={{ paddingBottom: `calc(2rem + var(--safe-bottom))` }}
className="fixed right-0 bottom-0 left-0 z-20 mx-auto flex w-full sm:max-w-[375px] gap-3 rounded-t-[30px] bg-white px-[17px] pt-6 shadow-[0_-18px_50px_rgba(15,23,42,0.08)]"
>
<Button className="" onClick={() => setIsCallResultSheetOpen(true)}>
{t.candidateContact.contacted}
</Button>
<Button className="" description={t.candidateContact.afterTwoDays}>
{t.candidateContact.noContactYet}
</Button>
</section>
</main>
</>
);
}