101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
const steps = ["Basic Info", "Family Info", "Professional", "Interests", "Privacy", "Review"];
|
|
|
|
const fieldsByStep: Record<number, { label: string; type?: string; placeholder?: string; options?: string[]; full?: boolean }[]> = {
|
|
0: [
|
|
{ label: "Full Name" },
|
|
{ label: "Email Address", type: "email" },
|
|
{ label: "Phone Number" },
|
|
{ label: "City" },
|
|
{ label: "State", type: "select", options: ["select state", "Texas", "Oklahoma", "Arkansas", "Louisiana"] },
|
|
],
|
|
1: [
|
|
{ label: "Spouse Name" },
|
|
{ label: "Number of Family Members" },
|
|
{ label: "Children (ages)", full: true },
|
|
],
|
|
2: [
|
|
{ label: "Profession" },
|
|
{ label: "Company" },
|
|
{ label: "LinkedIn / Website", full: true },
|
|
],
|
|
3: [{ label: "Your Interests", full: true, placeholder: "Community Service, Technology, Cricket…" }],
|
|
4: [
|
|
{ label: "Profile Visibility", type: "select", options: ["Members Only", "Public", "Circles Only"] },
|
|
{ label: "Contact Visibility", type: "select", options: ["Connections", "Hidden", "All Members"] },
|
|
],
|
|
5: [{ label: "Anything else you'd like us to know?", full: true }],
|
|
};
|
|
|
|
export default function MembershipForm() {
|
|
const [step, setStep] = useState(0);
|
|
const fields = fieldsByStep[step];
|
|
|
|
return (
|
|
<div className="form">
|
|
<div className="form__card">
|
|
{/* Steps */}
|
|
<div className="form__steps no-scrollbar">
|
|
{steps.map((s, i) => (
|
|
<button key={s} onClick={() => setStep(i)} className="form__step">
|
|
<p className={`form__step-num ${i === step ? "form__step-num--active" : ""}`}>
|
|
Step 0{i + 1}
|
|
</p>
|
|
<p className={`form__step-label ${i === step ? "form__step-label--active" : ""}`}>
|
|
{s}
|
|
</p>
|
|
{i === step && <span className="form__step-underline" />}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Fields */}
|
|
<div className="form__fields-wrap">
|
|
<h3 className="form__section-title">
|
|
Step I <span>{steps[step]}</span>
|
|
</h3>
|
|
<div className="form__fields">
|
|
{fields.map((f) => (
|
|
<div key={f.label} className={f.full ? "form__field--full" : ""}>
|
|
<label className="form__label">{f.label}</label>
|
|
{f.type === "select" ? (
|
|
<select className="form__select">
|
|
{f.options?.map((o) => (
|
|
<option key={o}>{o}</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<input
|
|
type={f.type ?? "text"}
|
|
placeholder={f.placeholder}
|
|
className="form__input"
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form__actions">
|
|
<button
|
|
onClick={() => setStep((s) => Math.max(0, s - 1))}
|
|
disabled={step === 0}
|
|
className="btn-ghost"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
onClick={() => setStep((s) => Math.min(steps.length - 1, s + 1))}
|
|
className="btn-primary"
|
|
>
|
|
{step === steps.length - 1 ? "Submit" : "Next"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|