add recipient component added
This commit is contained in:
victorAnumudu
@@ -0,0 +1,166 @@
|
||||
import React, {useState} from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Icons from '../Helpers/Icons'
|
||||
|
||||
function AddRecipient() {
|
||||
|
||||
//STATE FOR CONTROLLED INPUTS
|
||||
let [inputs, setInputs] = useState({
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
country: '',
|
||||
'bank-name': '',
|
||||
'account-number': '',
|
||||
'repeat-account-number': '',
|
||||
'account-type': '',
|
||||
state: '',
|
||||
city: ''
|
||||
})
|
||||
|
||||
// FUNCTION TO HANDLE INPUT CHANGE
|
||||
const handleChange = ({target:{name, value}}) => {
|
||||
setInputs(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
//valid inputs before submitting. Just for texting remove later
|
||||
|
||||
// setInputs((prev)=>{
|
||||
// for(let input in prev){
|
||||
// prev[input] = ''
|
||||
// }
|
||||
// })
|
||||
// RETURN INPUTS TO EMPTY STRING
|
||||
setInputs({
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
country: '',
|
||||
'bank-name': '',
|
||||
'account-number': '',
|
||||
'repeat-account-number': '',
|
||||
'account-type': '',
|
||||
state: '',
|
||||
city: ''
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
<div className="w-full mb-10 lg:mb-0">
|
||||
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
|
||||
<form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]' onSubmit={handleSubmit}>
|
||||
|
||||
{/* inputs starts here */}
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>First Name <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.firstname}
|
||||
name='firstname'
|
||||
type="text"
|
||||
placeholder='Account Firstname'
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.lastname}
|
||||
name='lastname'
|
||||
type="text"
|
||||
placeholder='Account Lastname'
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Country <span className='text-red-500'>*</span></label>
|
||||
<select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='country' onChange={handleChange}>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Bank Name <span className='text-red-500'>*</span></label>
|
||||
<select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Account Number <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs['account-number']}
|
||||
name='account-number'
|
||||
type="text"
|
||||
placeholder='Account No'
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Repeat Account Number <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs['repeat-account-number']}
|
||||
name='repeat-account-number'
|
||||
type="text"
|
||||
placeholder='Repeat Account No'
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Account type <span className='text-red-500'>*</span></label>
|
||||
<select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.state}
|
||||
name='state'
|
||||
type="text"
|
||||
placeholder='State'
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='add-recipient my-3 md:flex items-center justify-between'>
|
||||
<label className='w-full md:w-1/4 text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
|
||||
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
||||
value={inputs.city}
|
||||
name='city'
|
||||
type="text"
|
||||
placeholder='City'
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* end of inputs starts here */}
|
||||
|
||||
<div className='add-recipient-btn flex justify-end items-center py-4'>
|
||||
<button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
|
||||
<span className='pr-2'>ADD RECIPIENT</span>
|
||||
<Icons name="arrows" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddRecipient
|
||||
Reference in New Issue
Block a user