|
|
@ -1,3 +1,4 @@ |
|
|
|
|
|
import Image from "next/image"; |
|
|
import Link from "next/link"; |
|
|
import Link from "next/link"; |
|
|
import { useEffect, useRef } from "react"; |
|
|
import { useEffect, useRef } from "react"; |
|
|
import { IoInformation } from "react-icons/io5"; |
|
|
import { IoInformation } from "react-icons/io5"; |
|
|
@ -41,6 +42,21 @@ const iconNameMap: Record<QuestionCardIcon, UiIconName> = { |
|
|
family_marital: "marriage", |
|
|
family_marital: "marriage", |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const sectionIconImageMap: Partial<Record<QuestionCardIcon, string>> = { |
|
|
|
|
|
profile: "/assets/images/sections/01_personal_identity_details.png", |
|
|
|
|
|
contact: "/assets/images/sections/02_contact_residence_family_communication.png", |
|
|
|
|
|
health: "/assets/images/sections/03_physical_appearance_health.png", |
|
|
|
|
|
education: "/assets/images/sections/04_education_career_economic_status.png", |
|
|
|
|
|
family: "/assets/images/sections/05_family_background.png", |
|
|
|
|
|
marriage: "/assets/images/sections/06_marital_status_marriage_history_children.png", |
|
|
|
|
|
family_marital: "/assets/images/sections/06_marital_status_marriage_history_children.png", |
|
|
|
|
|
lifestyle: "/assets/images/sections/07_beliefs_lifestyle_personal_boundaries.png", |
|
|
|
|
|
criteria: "/assets/images/sections/08_future_spouse_criteria_red_lines.png", |
|
|
|
|
|
verification: "/assets/images/sections/09_identity_verification_documents.png", |
|
|
|
|
|
personality: "/assets/images/sections/10_personality_test.png", |
|
|
|
|
|
glasser: "/assets/images/sections/10_personality_test.png", |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
export function QuestionCard({ |
|
|
export function QuestionCard({ |
|
|
item, |
|
|
item, |
|
|
progress = item.progress, |
|
|
progress = item.progress, |
|
|
@ -56,6 +72,7 @@ export function QuestionCard({ |
|
|
: 0; |
|
|
: 0; |
|
|
const dashOffset = CIRCUMFERENCE - (normalizedProgress / 100) * CIRCUMFERENCE; |
|
|
const dashOffset = CIRCUMFERENCE - (normalizedProgress / 100) * CIRCUMFERENCE; |
|
|
const resolvedIconKey = item.icon || resolveSectionIcon(item.slug); |
|
|
const resolvedIconKey = item.icon || resolveSectionIcon(item.slug); |
|
|
|
|
|
const iconImageSrc = sectionIconImageMap[resolvedIconKey]; |
|
|
const iconName = iconNameMap[resolvedIconKey] ?? "details"; |
|
|
const iconName = iconNameMap[resolvedIconKey] ?? "details"; |
|
|
const cardRef = useRef<HTMLElement>(null); |
|
|
const cardRef = useRef<HTMLElement>(null); |
|
|
|
|
|
|
|
|
@ -105,11 +122,22 @@ export function QuestionCard({ |
|
|
> |
|
|
> |
|
|
<div className="flex items-start gap-2.5"> |
|
|
<div className="flex items-start gap-2.5"> |
|
|
<div className="relative flex h-[44px] w-[44px] shrink-0 items-center justify-center rounded-[12px] bg-linear-to-br from-[#E03950]/15 to-[#FE6F82]/15 text-white"> |
|
|
<div className="relative flex h-[44px] w-[44px] shrink-0 items-center justify-center rounded-[12px] bg-linear-to-br from-[#E03950]/15 to-[#FE6F82]/15 text-white"> |
|
|
|
|
|
{iconImageSrc ? ( |
|
|
|
|
|
<Image |
|
|
|
|
|
src={iconImageSrc} |
|
|
|
|
|
alt="" |
|
|
|
|
|
aria-hidden="true" |
|
|
|
|
|
width={30} |
|
|
|
|
|
height={30} |
|
|
|
|
|
className="size-[30px] object-contain" |
|
|
|
|
|
/> |
|
|
|
|
|
) : ( |
|
|
<UiIcon |
|
|
<UiIcon |
|
|
name={iconName} |
|
|
name={iconName} |
|
|
aria-hidden="true" |
|
|
aria-hidden="true" |
|
|
className="size-[22px]" |
|
|
className="size-[22px]" |
|
|
/> |
|
|
/> |
|
|
|
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="min-w-0 flex-1"> |
|
|
<div className="min-w-0 flex-1"> |
|
|
|