victorAnumudu
72 lines
3.7 KiB
React
72 lines
3.7 KiB
React
import React, {useState} from 'react'
|
|
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
|
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
|
|
|
function AddFund({payment}) {
|
|
|
|
//STATE FOR CONTROLLED INPUTS
|
|
let [inputs, setInputs] = useState('0')
|
|
|
|
// FUNCTION TO HANDLE INPUT CHANGE
|
|
const handleChange = ({target:{name, value}}) => {
|
|
setInputs(value)
|
|
}
|
|
|
|
//FUNCTION TO HANDLE SUBMIT
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
//valid inputs before submitting. Just for texting remove later
|
|
|
|
setInputs('')
|
|
}
|
|
return (
|
|
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
|
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
|
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
|
<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>
|
|
<hr />
|
|
<form className='md:p-8 p-4 add-fund-info'>
|
|
<div className='md:flex items-center'>
|
|
<label className='w-full md:w-2/4 text-slate-600 text-lg'>Amount(Naira) <span className='text-red-500'>*</span></label>
|
|
<input className='w-full md:w-2/4 p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
|
value={inputs}
|
|
name='amount'
|
|
type="text"
|
|
placeholder='Amount'
|
|
required
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
</form>
|
|
<hr />
|
|
<div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
|
|
<button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
|
|
</div>
|
|
</div>
|
|
<div className="add-fund py-4 my-2 w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
|
<h2 className='md:px-8 px-4 py-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>
|
|
<hr />
|
|
<p className='md:px-8 px-4 py-2 text-slate-600 dark:text-white text-base lg:text-xl font-medium'>Transfer fund to WrenchBoard GTB Account 0250869867</p>
|
|
<p className='md:px-8 px-4 py-2 text-slate-500 dark:text-white text-sm lg:text-base font-medium'>
|
|
Make sure you add your account username in the notes part of the transfer for prompt processing. When the transfer is complete notify here <a className='text-sky-blue' href='#'>Contact us</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
|
<div className="wallet w-full md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
|
<h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
|
|
<p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
|
|
{payment.loading ?
|
|
<LoadingSpinner size='16' color='sky-blue' />
|
|
:
|
|
<RecentActivityTable payment={payment}/>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AddFund |