wallet page implementation

2023-04-21 17:28:40 +01:00
parent ae83c7e533
commit 85676cdb58
7 changed files with 385 additions and 5 deletions
@@ -0,0 +1,83 @@
+import React, {useState} from 'react'
+
+function AddFund() {
+   
+    //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-[500px] 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>
+                    <table className="wallet-activity w-full table-auto border-collapse text-left">
+                        <thead className='border-b-2'>
+                            <tr className='text-slate-600'>
+                            <th className="py-3">Date</th>
+                            <th className="py-3">Recipient</th>
+                            <th className="py-3">Amount/Fee</th>
+                            <th className="py-3">Conf/Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr className='text-slate-500'>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default AddFund