Users-Wrench/src/components/MyWallet/AddRecipient.jsx

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