Mahyar Khanbolooki
111 lines
5.0 KiB
TypeScript
111 lines
5.0 KiB
TypeScript
"use client";
|
||
|
||
import Button from '@/components/button/PrimaryButton';
|
||
import InputField from '@/components/input/InputField';
|
||
import { ef, ue } from '@/lib/helpers/utfNumbers';
|
||
import { ArrowLeft, ArrowRight, WalletMinus } from 'iconsax-react';
|
||
import { useRouter } from 'next/navigation';
|
||
import React, { useState } from 'react'
|
||
|
||
type Props = object
|
||
|
||
function UserWalletIndex({ }: Props) {
|
||
const router = useRouter();
|
||
const [chargeValue, setChargeValue] = useState<string>('0');
|
||
const chargeAction = (e: React.FormEvent<HTMLFormElement>) => {
|
||
e.preventDefault();
|
||
const data = new FormData(e.currentTarget)
|
||
const value = Number(ue(String(data.get('chargeValue') ?? 0))) + 0;
|
||
console.log("Charge for: ", value);
|
||
}
|
||
|
||
return (
|
||
<div className='overflow-y-auto h-full noscrollbar flex flex-col'>
|
||
<div className='grid grid-cols-3 items-center'>
|
||
<span></span>
|
||
<h1 className='text-sm2 place-self-center font-medium'>پروفایل کاربری</h1>
|
||
<ArrowLeft
|
||
className='cursor-pointer place-self-end'
|
||
size='24'
|
||
color='currentColor'
|
||
onClick={() => { router.back() }}
|
||
/>
|
||
</div>
|
||
|
||
<form
|
||
onSubmit={chargeAction}
|
||
className="mt-8 flex-1 h-full bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
|
||
|
||
<div className="">
|
||
<div className="flex items-center justify-center text-center gap-4 pb-6 border-b-[1.5px] border-border">
|
||
<div className='block'>
|
||
<div className='font-medium text-sm flex items-center gap-2'>
|
||
<WalletMinus className='size-5 stroke-foreground mb-0.5' />
|
||
موجودی کیف پول
|
||
</div>
|
||
<div className='text-sm text-primary mt-3 inline-flex dark:text-neutral-200 items-center gap-2'>
|
||
{ef('250.000 تومان')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-3 mt-6">
|
||
<div className='inline-flex items-center mb-3 gap-2.5 text-sm2'>
|
||
برای شارژ کیف پول خود میتوانید بر روی یکی از مبالغ زیر کلیک کنید و یا مبلغ دلخواه خود را وارد کنید
|
||
</div>
|
||
<Button
|
||
type='button'
|
||
onClick={() => setChargeValue('50000')}
|
||
className='!bg-disabled text-sm2 !text-foreground flex justify-between items-center'
|
||
>
|
||
<ArrowRight className='stroke-foreground size-5' />
|
||
<span className='mt-0.5'>
|
||
{ef('50,000 تومان')}
|
||
</span>
|
||
</Button>
|
||
<Button
|
||
type='button'
|
||
onClick={() => setChargeValue('150000')}
|
||
className='!bg-disabled text-sm2 !text-foreground flex justify-between items-center'
|
||
>
|
||
<ArrowRight className='stroke-foreground size-5' />
|
||
<span className='mt-0.5'>
|
||
{ef('150,000 تومان')}
|
||
</span>
|
||
</Button>
|
||
<Button
|
||
type='button'
|
||
onClick={() => setChargeValue('300000')}
|
||
className='!bg-disabled text-sm2 !text-foreground flex justify-between items-center'
|
||
>
|
||
<ArrowRight className='stroke-foreground size-5' />
|
||
<span className='mt-0.5'>
|
||
{ef('300,000 تومان')}
|
||
</span>
|
||
</Button>
|
||
<InputField
|
||
className='bg-container mt-7'
|
||
labelText='مبلغ دلخواه (تومان)'
|
||
dir='ltr'
|
||
inputMode='decimal'
|
||
htmlFor='chargeValue'
|
||
placeholder=''
|
||
value={ef(chargeValue)}
|
||
onChange={(e) => setChargeValue(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='w-full text-center mt-6'>
|
||
<Button
|
||
type='submit'
|
||
>
|
||
شارژ کیف پول
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default UserWalletIndex |