sina_sajjadi
/
marriage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix input autofill code

master
mortezaei 4 days ago
parent
4a4051ea93
commit
0443604714
1 changed files with 146 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 310
      src/app/new-match/new-match-client.tsx

310
src/app/new-match/new-match-client.tsx
View File

@ -520,63 +520,55 @@ export default function NewMatchClient() {
return ( return (
<> <>
<PageBackground /> <PageBackground />
<main
style={{
paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16}px`,
paddingTop: `${Math.max(12, top + 4)}px`,
}}
className="-mx-[17px] flex h-full min-h-full flex-col justify-between overflow-hidden text-center px-4"
>
<PageHeader profile={profile} />
<main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
<PageHeader className="-mx-[6px]" profile={profile} />
<div className="flex flex-1 flex-col justify-between">
<div className="flex flex-1 flex-col justify-between gap-4 pt-2">
{/* Header Section Skeleton */} {/* Header Section Skeleton */}
<section className="flex flex-col items-center mt-9">
<section className="flex flex-col items-center">
<LoadingSkeleton className="h-[60px] w-[60px] rounded-full" /> <LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
<LoadingSkeleton className="h-6 w-[220px] mt-4" />
<LoadingSkeleton className="h-4 w-[280px] mt-3" />
<LoadingSkeleton className="h-4 w-[240px] mt-1.5" />
<LoadingSkeleton className="h-6 w-[220px] mt-3" />
<LoadingSkeleton className="h-4 w-[280px] mt-2" />
<LoadingSkeleton className="h-4 w-[240px] mt-1" />
</section> </section>
<div className="flex flex-col justify-between">
{/* Match Card Skeleton */}
<section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
{/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Match Card Skeleton */}
<section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
{/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Subtitle / Details lines */}
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
<LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[120px]" />
<LoadingSkeleton className="h-3 w-[150px]" />
</div>
{/* Subtitle / Details lines */}
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
<LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[120px]" />
<LoadingSkeleton className="h-3 w-[150px]" />
</div>
{/* Button skeleton */}
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
</section>
{/* Advisor Card Skeleton */}
<section className="mt-[36px]">
<div className="rounded-[13px] border border-white/80 bg-white px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
<LoadingSkeleton className="h-[16px] w-[140px]" />
<div className="mt-2 space-y-1">
<LoadingSkeleton className="h-[10px] w-[260px]" />
<LoadingSkeleton className="h-[10px] w-[180px]" />
</div>
{/* Button skeleton */}
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
</section>
<div className="mt-4 flex items-center justify-between gap-3">
<div className="flex items-center pl-1">
<LoadingSkeleton className="h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
</div>
{/* Advisor Card Skeleton */}
<section>
<div className="rounded-[13px] border border-white/80 bg-white px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
<LoadingSkeleton className="h-[16px] w-[140px]" />
<div className="mt-2 space-y-1">
<LoadingSkeleton className="h-[10px] w-[260px]" />
<LoadingSkeleton className="h-[10px] w-[180px]" />
</div>
<LoadingSkeleton className="h-[38px] w-[120px] rounded-[9px]" />
<div className="mt-4 flex items-center justify-between gap-3">
<div className="flex items-center pl-1">
<LoadingSkeleton className="h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
</div> </div>
<LoadingSkeleton className="h-[38px] w-[120px] rounded-[9px]" />
</div> </div>
</section>
</div>
</div>
</section>
</div> </div>
</main> </main>
</> </>
@ -610,17 +602,11 @@ export default function NewMatchClient() {
<> <>
<PageBackground /> <PageBackground />
<main
style={{
paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16}px`,
paddingTop: `${Math.max(12, top + 4)}px`,
}}
className="-mx-[17px] flex h-full min-h-full flex-col justify-between overflow-hidden text-center px-4"
>
<PageHeader profile={profile} />
<div className="flex flex-1 flex-col justify-between">
<section className="flex flex-col items-center mt-9">
<main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
<PageHeader className="-mx-[6px]" profile={profile} />
<div className="flex flex-1 flex-col justify-between gap-4 pt-2">
<section className="flex flex-col items-center">
<div <div
aria-hidden="true" aria-hidden="true"
className="relative flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_12px_28px_rgba(240,68,91,0.22)]" className="relative flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_12px_28px_rgba(240,68,91,0.22)]"
@ -632,122 +618,118 @@ export default function NewMatchClient() {
alt="notification" alt="notification"
/> />
</div> </div>
<h2 className="text-[22px] font-bold mt-3.5">
<h1 className="mt-3 text-center text-[20px] font-bold leading-[1.25] text-[#1A1A1A]">
{matchHeadingTitle} {matchHeadingTitle}
</h2>
<p className="mt-[11px] max-w-[322px] text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
</h1>
<p className="mt-2 max-w-[315px] text-center text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
{matchHeadingDescription} {matchHeadingDescription}
</p> </p>
</section> </section>
<div className="flex flex-col justify-between">
{isLoading ? (
<section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
<div className="flex flex-col items-center py-2">
{/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Subtitle / Details lines */}
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
<LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[120px]" />
<LoadingSkeleton className="h-3 w-[150px]" />
</div>
{isLoading ? (
<section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
<div className="flex flex-col items-center py-2">
{/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Button skeleton */}
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
{/* Subtitle / Details lines */}
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
<LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[120px]" />
<LoadingSkeleton className="h-3 w-[150px]" />
</div> </div>
</section>
) : (
<section className="mt-[36px] rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[18px] pb-[17px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
{isError ? (
<p className="py-8 text-[13px] font-semibold">
Unable to load match summary.
</p>
) : matchSummary ? (
<>
<h2 className="break-words text-[14px] leading-[1.4] font-bold">
<span>{matchDisplay.name}</span>
</h2>
<div className="mt-[6px] min-h-[48px] space-y-0.5 text-left">
{matchDisplay.age ? (
<FieldLine field={matchDisplay.age} />
) : null}
{matchDisplay.residence ? (
<FieldLine field={matchDisplay.residence} />
) : null}
{pairedEduFields.length ? (
<p className="break-words text-[11px] leading-[1.65] font-medium text-white">
{pairedEduFields.map((field, index) => (
<span key={field.id}>
{index > 0 ? (
<span className="opacity-75"> | </span>
) : null}
<span className="font-semibold">
{field.label}:{" "}
</span>
<span>{field.value}</span>
{/* Button skeleton */}
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
</div>
</section>
) : (
<section className="rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[16px] pb-[16px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
{isError ? (
<p className="py-6 text-[13px] font-semibold">
Unable to load match summary.
</p>
) : matchSummary ? (
<>
<h2 className="break-words text-[14px] leading-[1.4] font-bold">
<span>{matchDisplay.name}</span>
</h2>
<div className="mt-[6px] min-h-[44px] space-y-0.5 text-left">
{matchDisplay.age ? (
<FieldLine field={matchDisplay.age} />
) : null}
{matchDisplay.residence ? (
<FieldLine field={matchDisplay.residence} />
) : null}
{pairedEduFields.length ? (
<p className="break-words text-[11px] leading-[1.65] font-medium text-white">
{pairedEduFields.map((field, index) => (
<span key={field.id}>
{index > 0 ? (
<span className="opacity-75"> | </span>
) : null}
<span className="font-semibold">
{field.label}:{" "}
</span> </span>
))}
</p>
) : null}
{matchDisplay.job ? (
<FieldLine field={matchDisplay.job} />
) : null}
{matchDisplay.hobbies ? (
<FieldLine field={matchDisplay.hobbies} />
) : null}
{matchDisplay.maritalStatus ? (
<FieldLine field={matchDisplay.maritalStatus} />
) : null}
{matchDisplay.cityPreference ? (
<FieldLine field={matchDisplay.cityPreference} />
) : null}
</div>
<span>{field.value}</span>
</span>
))}
</p>
) : null}
{matchDisplay.job ? (
<FieldLine field={matchDisplay.job} />
) : null}
{matchDisplay.hobbies ? (
<FieldLine field={matchDisplay.hobbies} />
) : null}
{matchDisplay.maritalStatus ? (
<FieldLine field={matchDisplay.maritalStatus} />
) : null}
{matchDisplay.cityPreference ? (
<FieldLine field={matchDisplay.cityPreference} />
) : null}
</div>
<button
type="button"
onClick={() => {
if (isMale && !hasActiveSub) {
setIsPaymentSheetOpen(true);
} else {
openProfile();
}
}}
className="mt-[15px] inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
>
{t["View more details"]}
</button>
</>
) : (
<p className="py-8 text-[13px] font-semibold">
No match summary is available yet.
</p>
)}
</section>
)}
<div className="w-full space-y-3">
<AdvisorActionsCard
className="mt-[36px]"
title={t["Get an advisor"]}
description={
t[
"Not sure what to do next? Our psychology section is here to guide you at every step."
]
}
avatars={advisorAvatars}
extraCount={7}
getAdvisorLabel={t["Get Advisor"]}
onGetAdvisor={openAdvisors}
/>
</div>
</div>
<button
type="button"
onClick={() => {
if (isMale && !hasActiveSub) {
setIsPaymentSheetOpen(true);
} else {
openProfile();
}
}}
className="mt-[14px] inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
>
{t["View more details"]}
</button>
</>
) : (
<p className="py-6 text-[13px] font-semibold">
No match summary is available yet.
</p>
)}
</section>
)}
<AdvisorActionsCard
title={t["Get an advisor"]}
description={
t[
"Not sure what to do next? Our psychology section is here to guide you at every step."
]
}
avatars={advisorAvatars}
extraCount={7}
getAdvisorLabel={t["Get Advisor"]}
onGetAdvisor={openAdvisors}
/>
</div> </div>
</main> </main>

Write Preview
Loading…
Cancel
Save