add: wallet page

2025-08-09 15:07:13 +03:30
parent df751dfea4
commit f7eb07cc13
1 changed files with 111 additions and 0 deletions
@@ -0,0 +1,111 @@
+"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 items-center gap-2'>
+                                {ef('250.000 تومان')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="grid gap-6 mt-6">
+                        <div className='inline-flex items-center 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'
+                            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