Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
75d173e7d6 | ||
|
victorAnumudu
|
eaa037dac9 | ||
|
DESKTOP-GBA0BK8\Admin
|
489f22d298 | ||
 ameye
|
23a3426970 |
@@ -43,10 +43,10 @@ export default function Hero({ className }) {
|
||||
{/* heading */}
|
||||
<div>
|
||||
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||
Lock and Lob x Fiesta Spurs
|
||||
Welcome
|
||||
</h1>
|
||||
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||
ID : 2320382
|
||||
Last Login : 10-10-2026
|
||||
</span>
|
||||
</div>
|
||||
{/* user */}
|
||||
@@ -64,9 +64,9 @@ export default function Hero({ className }) {
|
||||
{/* countdown */}
|
||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">Current Bid</p>
|
||||
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
75,320 ETH
|
||||
ABCDEFGH01
|
||||
</p>
|
||||
<p className="text-base text-white tracking-wide">773.69 USD</p>
|
||||
</div>
|
||||
@@ -74,7 +74,7 @@ export default function Hero({ className }) {
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
<CountDown lastDate="2023-03-04 4:00:00" />
|
||||
<CountDown lastDate="2023-04-26 4:00:00" />
|
||||
</p>
|
||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||
<span>Hrs</span>
|
||||
@@ -85,19 +85,13 @@ export default function Hero({ className }) {
|
||||
</div>
|
||||
{/* action */}
|
||||
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||
<Link
|
||||
to="/active-bids"
|
||||
className=" btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
|
||||
>
|
||||
Place a Bid
|
||||
</Link>
|
||||
<Link
|
||||
to="/market-place"
|
||||
className="text-white text-base sm:block hidden"
|
||||
>
|
||||
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||
{" "}
|
||||
View Art Work
|
||||
View All Task(s)
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -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
|
||||
@@ -83,7 +83,7 @@ function TransferFund() {
|
||||
<span className='text-red-500 mx-2'>*</span>
|
||||
<span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
|
||||
</label>
|
||||
<Link to='#' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
|
||||
<Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
|
||||
</div>
|
||||
<select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='recipient' onChange={handleChange}>
|
||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||
|
||||
@@ -6,6 +6,7 @@ import Layout from '../Partials/Layout'
|
||||
import Balance from './Balance'
|
||||
import TransferFund from './TransferFund'
|
||||
import AddFund from './AddFund'
|
||||
import AddRecipient from './AddRecipient'
|
||||
|
||||
function Wallet() {
|
||||
return (
|
||||
@@ -27,6 +28,7 @@ const WalletRoutes = () => {
|
||||
<Route path='transfer-fund' element={<TransferFund />} />
|
||||
<Route index element={<Balance />} />
|
||||
<Route path='*' element={<Navigate to='/' />} />
|
||||
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
)
|
||||
|
||||
@@ -122,7 +122,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
|
||||
className="nav-item flex items-center justify-start space-x-3.5"
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">
|
||||
<Icons name="wallet-two" />
|
||||
<Icons name="notification" />
|
||||
</span>
|
||||
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
|
||||
Messages
|
||||
|
||||
@@ -122,7 +122,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
}`}
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
|
||||
<Icons name="active-bids" />
|
||||
<Icons name="market" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
|
||||
@@ -165,7 +165,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
}`}
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
|
||||
<Icons name="active-bids" />
|
||||
<Icons name="notification-setting" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
|
||||
@@ -185,7 +185,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
}`}
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
|
||||
<Icons name="active-bids" />
|
||||
<Icons name="wallet-two" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
|
||||
|
||||
Reference in New Issue
Block a user