Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2f16d43

Browse files
done multi form
1 parent 34dcea1 commit 2f16d43

File tree

8 files changed

+277
-103
lines changed

8 files changed

+277
-103
lines changed

β€Žsrc/App.jsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1+
import { useState } from 'react';
12
import IndexAccordian from './components/accordian/IndexAccordian';
23
import Button from './components/button/Button';
34
import MultiStepForm from './components/multi-step-form/MultiStepForm';
4-
import Wrapper from './components/Wrapper';
55

66

77
const App = () => {
8+
const [formSubmited, setFormSubmited] = useState(false);
9+
const [cancel, setCancel] = useState(false);
10+
11+
// HANDLE SUBMIT FUNCTION
12+
function onSubmit(data) {
13+
setFormSubmited(true)
14+
};
15+
16+
// HANDLE CANCEL FUNCTION
17+
function onCancel(data) {
18+
setCancel(true)
19+
};
820

921
return (
1022
<section className='bg-slate-100'>
23+
1124
<h1 className='text-4xl font-bold text-center py-10 text-cyan-500'>
1225
Frontend System Design
1326
</h1>
@@ -29,7 +42,12 @@ const App = () => {
2942

3043
{/* Multi Step Form */}
3144
<div className='py-10'>
32-
<MultiStepForm />
45+
{formSubmited && <h1 className='text-center text-2xl font-bold text-green-500'>Form Submited Successfully.😎</h1>}
46+
47+
{!formSubmited && <MultiStepForm onSubmit={onSubmit} onCancel={onCancel} />}
48+
49+
{cancel && <h1 className='text-center text-2xl font-bold text-red-500'>User want,s to cancel.πŸ”₯</h1>}
50+
3351
</div>
3452
</section>
3553
)

β€Žsrc/components/multi-step-form/ContactInfo.jsx

Lines changed: 0 additions & 28 deletions
This file was deleted.

β€Žsrc/components/multi-step-form/FinancialInformation.jsx

Lines changed: 0 additions & 29 deletions
This file was deleted.
Lines changed: 109 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,116 @@
1-
import React from 'react'
2-
import PersonalInfo from './PersonalInfo';
3-
import ContactInfo from './ContactInfo';
4-
import FinancialInformation from './FinancialInformation';
1+
import { useState } from 'react';
2+
import { ChevronLeft } from 'lucide-react';
3+
import Step1 from './Step1';
4+
import Step2 from './Step2';
5+
import Step3 from './Step3';
6+
7+
const page = {
8+
Step1: 1,
9+
Step2: 2,
10+
Step3: 3,
11+
};
12+
13+
const FINAL_STEP = page.Step3;
14+
15+
const MultiStepForm = ({ onSubmit = () => { }, onCancel = () => { } }) => {
16+
const [currentStep, setCurrentStep] = useState(page.Step1);
17+
18+
const [inputs, setInputs] = useState({
19+
step1: {
20+
name: "",
21+
email: ""
22+
},
23+
step2: {
24+
phone: "",
25+
city: ""
26+
},
27+
step3: {
28+
sallery: "",
29+
bank: ""
30+
},
31+
});
32+
33+
const Steps = {
34+
[page.Step1]: Step1,
35+
[page.Step2]: Step2,
36+
[page.Step3]: Step3,
37+
};
38+
39+
const Component = Steps[currentStep];
40+
41+
const submitButtonText = FINAL_STEP === currentStep ? "Save" : "Next";
42+
43+
44+
// HANDLE NEXT FUNCTION
45+
function handleNext(e) {
46+
e.preventDefault();
47+
if (currentStep === page.Step1) {
48+
setCurrentStep(currentStep + 1)
49+
} else if (currentStep === page.Step2) {
50+
setCurrentStep(currentStep + 1)
51+
} else {
52+
console.log("Submit Data");
53+
onSubmit(inputs)
54+
}
55+
};
56+
57+
// HANDLE PREVIOUS FUNCTION
58+
function handlePrev() {
59+
if (currentStep > 1) {
60+
setCurrentStep(currentStep - 1);
61+
}
62+
};
63+
64+
// HANDLE INPUT CHANGE
65+
function handleInputChange({ stepKey, value, inputKey }) {
66+
const oldInput = structuredClone(inputs);
67+
oldInput[stepKey][inputKey] = value;
68+
setInputs(oldInput);
69+
};
70+
71+
const inputToSend = inputs[`step${currentStep}`];
72+
console.log(inputToSend);
573

6-
const MultiStepForm = () => {
774
return (
8-
<section>
9-
<form action="">
10-
<PersonalInfo/>
11-
<ContactInfo/>
12-
<FinancialInformation/>
13-
</form>
75+
<sectionclassName='flex justify-center items-center'>
76+
<form action=""className='w-[500px]'>
77+
<Component
78+
stepKey={`step${currentStep}`}
79+
onChange={handleInputChange}
80+
inputs={inputToSend}/>
1481

15-
<div className='flex justify-center items-center space-x-4 py-10'>
16-
<button className='bg-blue-500 rounded px-4 py-2 text-white'>Cancel</button>
17-
<button className='bg-blue-500 rounded px-4 py-2 text-white'>Submit</button>
18-
</div>
82+
<div className='flex justify-between items-center space-x-4 py-6'>
83+
84+
{
85+
currentStep > page.Step1 ? <ChevronLeft
86+
onClick={handlePrev}
87+
className='cursor-pointer bg-blue-500 p-0.5 rounded-full text-white text-lg' />
88+
:
89+
<ChevronLeft
90+
onClick={handlePrev}
91+
disabled
92+
className="bg-slate-300 p-0.5 rounded-full text-white text-lg" />
93+
}
94+
95+
<div className='space-x-4'>
96+
<button
97+
onClick={onCancel}
98+
type='button'
99+
className='bg-blue-500 rounded px-4 py-2 text-white font-semibold text-lg active:bg-blue-600'>
100+
Cancel
101+
</button>
102+
103+
<button
104+
onClick={handleNext}
105+
type='button'
106+
className='bg-blue-500 rounded px-4 py-2 text-white font-semibold text-lg active:bg-blue-600'>
107+
{submitButtonText}
108+
</button>
109+
</div>
110+
</div>
111+
</form>
19112
</section>
20113
)
21114
};
22115

23-
export default MultiStepForm
116+
export default MultiStepForm;

β€Žsrc/components/multi-step-form/PersonalInfo.jsx

Lines changed: 0 additions & 28 deletions
This file was deleted.
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import Title from "../Title"
2+
import Wrapper from "../Wrapper"
3+
4+
const Step1 = ({ inputs, onChange = () => { }, stepKey }) => {
5+
const { name, email } = inputs || {};
6+
7+
// HANDLE CHANGE FUNCTION
8+
function handleChange(inputKey) {
9+
return (event) => {
10+
onChange({ value: event.target.value, stepKey, inputKey });
11+
}
12+
};
13+
14+
return (
15+
<section>
16+
<Title>
17+
Personal Information
18+
</Title>
19+
20+
<Wrapper>
21+
<div className="space-y-2">
22+
<div className="space-y-2">
23+
<label className="text-xl text-slate-600" htmlFor="name">Name</label><br />
24+
<input
25+
type="text"
26+
id="name"
27+
value={name}
28+
onChange={handleChange("name")}
29+
placeholder="Write your name"
30+
className="border rounded px-2 h-10 w-full" />
31+
</div>
32+
33+
<div className="space-y-2">
34+
<label className="text-xl text-slate-600" htmlFor="email">Email</label><br />
35+
<input
36+
type="email"
37+
id="email"
38+
value={email}
39+
onChange={handleChange("email")}
40+
placeholder="example@gmail.com"
41+
className="border rounded px-2 h-10 w-full" />
42+
</div>
43+
</div>
44+
</Wrapper>
45+
</section>
46+
)
47+
}
48+
49+
export default Step1
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import Title from '../Title'
2+
import Wrapper from '../Wrapper'
3+
4+
const Step2 = ({ inputs, onChange = () => { }, stepKey }) => {
5+
const { phone, city } = inputs || {};
6+
7+
function handleChange(inputKey) {
8+
return (event) => {
9+
onChange({ value: event.target.value, stepKey, inputKey });
10+
}
11+
};
12+
13+
return (
14+
<section>
15+
<Title>
16+
Contact Information
17+
</Title>
18+
19+
<Wrapper>
20+
<div className="space-y-2">
21+
<div className="space-y-2">
22+
<label className="text-xl text-slate-600" htmlFor="tel">Phone</label><br />
23+
<input
24+
id="tel"
25+
type="tel"
26+
value={phone}
27+
onChange={handleChange("phone")}
28+
placeholder="Write your phone number"
29+
className="border rounded px-2 h-10 w-full" />
30+
</div>
31+
32+
33+
<div className="space-y-2">
34+
<label className="text-xl text-slate-600" htmlFor="text">City</label><br />
35+
<input
36+
id="text"
37+
type="text"
38+
value={city}
39+
placeholder="City name"
40+
onChange={handleChange("city")}
41+
className="border rounded px-2 h-10 w-full" />
42+
</div>
43+
</div>
44+
</Wrapper>
45+
</section>
46+
)
47+
}
48+
49+
export default Step2

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /