victorAnumudu
120 lines
6.9 KiB
React
120 lines
6.9 KiB
React
import React, {useState} from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
function Balance() {
|
|
return (
|
|
<div className="content-wrapper">
|
|
<div className='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="wallet w-full md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
|
<div className='flex items-baseline justify-between'>
|
|
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>
|
|
<p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>
|
|
</div>
|
|
{/* wallet balance */}
|
|
<div className="md:flex items-center flex-wrap mt-3">
|
|
<div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
|
|
<div className='balance-info'>
|
|
<p className='py-2'>Currency</p>
|
|
<span className='text-base'>Naira</span>
|
|
<p className='text-base text-slate-500'>Naira</p>
|
|
</div>
|
|
<div className='balance-info'>
|
|
<p className='py-2'>balance</p>
|
|
<span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>₦0.00</span>
|
|
</div>
|
|
<div className='balance-info'>
|
|
<p className='py-2'>Escrow</p>
|
|
<span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>₦0.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
|
|
<Link to='transfer-fund' className='text-base text-white px-3 py-1 bg-purple rounded-md hover:opacity-80'>Transfer</Link>
|
|
<Link to='add-fund' className='text-base text-white px-3 py-1 bg-[orange] rounded-md hover:opacity-80'>Top Up</Link>
|
|
</div>
|
|
</div>
|
|
{/* end of wallet balance */}
|
|
</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-[200px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
|
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
|
|
<p className='text-base text-slate-500 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>
|
|
|
|
<div className='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="wallet w-full md:p-8 p-4 h-[200px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
|
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Purchases</h2>
|
|
<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">Description</th>
|
|
<th className="py-3">Amount</th>
|
|
<th className="py-3">Fee</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 className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
|
<div className="wallet w-full md:p-8 p-4 h-[200px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
|
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
|
|
<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">Description</th>
|
|
<th className="py-3">Amount</th>
|
|
<th className="py-3">Active</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>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Balance |