Browse Source

fix input autofill code

master
mortezaei 4 days ago
parent
commit
cc31688ded
  1. 115
      src/app/new-match/new-match-client.tsx

115
src/app/new-match/new-match-client.tsx

@ -531,53 +531,51 @@ export default function NewMatchClient() {
<PageHeader profile={profile} /> <PageHeader profile={profile} />
</div> </div>
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between">
{/* Header Section Skeleton */}
<section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0">
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between py-1">
{/* 1. Header Section Skeleton */}
<section className="flex flex-col items-center shrink-0">
<LoadingSkeleton className="h-[60px] w-[60px] rounded-full" /> <LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
<LoadingSkeleton className="h-6 w-[220px] mt-2.5 sm:mt-3" /> <LoadingSkeleton className="h-6 w-[220px] mt-2.5 sm:mt-3" />
<LoadingSkeleton className="h-4 w-[280px] mt-2" /> <LoadingSkeleton className="h-4 w-[280px] mt-2" />
<LoadingSkeleton className="h-4 w-[240px] mt-1" /> <LoadingSkeleton className="h-4 w-[240px] mt-1" />
</section> </section>
<div className="flex flex-col justify-between shrink-0">
{/* Match Card Skeleton */}
<section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
{/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" />
{/* 2. Match Card Skeleton */}
<section className="w-full rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center shrink-0">
{/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Subtitle / Details lines */}
<div className="mt-2 w-full flex flex-col items-center gap-2 min-h-[40px]">
<LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[150px]" />
</div>
{/* Button skeleton */}
<LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" />
</section>
{/* Subtitle / Details lines */}
<div className="mt-2 w-full flex flex-col items-center gap-2 min-h-[40px]">
<LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[150px]" />
</div>
{/* Advisor Card Skeleton */}
<section className="mt-4 sm:mt-6">
<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-3 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>
{/* 3. Advisor Card Skeleton */}
<section className="w-full shrink-0">
<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>
</> </>
@ -628,8 +626,9 @@ export default function NewMatchClient() {
<PageHeader profile={profile} /> <PageHeader profile={profile} />
</div> </div>
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between">
<section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0">
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between py-1">
{/* 1. Header Section */}
<section className="flex flex-col items-center shrink-0">
<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)]"
@ -649,9 +648,10 @@ export default function NewMatchClient() {
</p> </p>
</section> </section>
<div className="flex flex-col justify-between shrink-0">
{/* 2. Match Summary Card Section */}
<div className="w-full shrink-0">
{isLoading ? ( {isLoading ? (
<section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
<section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
<div className="flex flex-col items-center py-2"> <div className="flex flex-col items-center py-2">
{/* Name line */} {/* Name line */}
<LoadingSkeleton className="h-5 w-[140px]" /> <LoadingSkeleton className="h-5 w-[140px]" />
@ -663,11 +663,11 @@ export default function NewMatchClient() {
</div> </div>
{/* Button skeleton */} {/* Button skeleton */}
<LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" />
<LoadingSkeleton className="mt-3 h-[40px] w-full rounded-[10px]" />
</div> </div>
</section> </section>
) : ( ) : (
<section className="mt-4 sm:mt-6 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)]">
<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 ? ( {isError ? (
<p className="py-8 text-[13px] font-semibold"> <p className="py-8 text-[13px] font-semibold">
Unable to load match summary. Unable to load match summary.
@ -736,7 +736,7 @@ export default function NewMatchClient() {
openProfile(); openProfile();
} }
}} }}
className="mt-3 sm:mt-3.5 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"
className="mt-3 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"]} {t["View more details"]}
</button> </button>
@ -748,21 +748,22 @@ export default function NewMatchClient() {
)} )}
</section> </section>
)} )}
<div className="w-full space-y-3">
<AdvisorActionsCard
className="mt-4 sm:mt-6"
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>
{/* 3. Advisor Section */}
<div className="w-full shrink-0">
<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>
</div> </div>
</main> </main>

Loading…
Cancel
Save