hamid zarghami
111 lines
4.7 KiB
TypeScript
111 lines
4.7 KiB
TypeScript
import { FC, useState } from 'react'
|
||
import Button from '../../../components/Button'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { clx } from '../../../helpers/utils'
|
||
import SamanImage from '../../../assets/images/saman.png'
|
||
import Input from '../../../components/Input'
|
||
|
||
const Online: FC = () => {
|
||
|
||
const { t } = useTranslation('global')
|
||
const [priceSelect, setPriceSelect] = useState<number>(1)
|
||
const [bankSelected, setBankSelected] = useState<number>(1)
|
||
|
||
return (
|
||
<div className='mt-8 bg-white p-8 rounded-3xl'>
|
||
<div>
|
||
{t('wallet.online_pay')}
|
||
</div>
|
||
|
||
<div className='mt-8 text-sm'>
|
||
{t('wallet.select_price')}
|
||
</div>
|
||
|
||
<div className='mt-4 flex gap-4 flex-wrap'>
|
||
<div onClick={() => setPriceSelect(1)} className={clx(
|
||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-4 rounded-lg',
|
||
priceSelect === 1 && 'border-black'
|
||
)}>
|
||
۱۰,۰۰۰,۰۰۰ تومان
|
||
</div>
|
||
<div onClick={() => setPriceSelect(2)} className={clx(
|
||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
|
||
priceSelect === 2 && 'border-black'
|
||
)}>
|
||
۱۰,۰۰۰,۰۰۰ تومان
|
||
</div>
|
||
<div onClick={() => setPriceSelect(3)} className={clx(
|
||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
|
||
priceSelect === 3 && 'border-black'
|
||
)}>
|
||
۱۰,۰۰۰,۰۰۰ تومان
|
||
</div>
|
||
<div onClick={() => setPriceSelect(4)} className={clx(
|
||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
|
||
priceSelect === 4 && 'border-black'
|
||
)}>
|
||
۱۰,۰۰۰,۰۰۰ تومان
|
||
</div>
|
||
<div onClick={() => setPriceSelect(5)} className={clx(
|
||
'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
|
||
priceSelect === 5 && 'border-black'
|
||
)}>
|
||
۱۰,۰۰۰,۰۰۰ تومان
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-9'>
|
||
<Input
|
||
label={t('wallet.optional_price')}
|
||
placeholder={t('wallet.enter_your_price')}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-8 text-sm'>
|
||
<div>
|
||
{t('wallet.select_payment')}
|
||
</div>
|
||
|
||
<div className='mt-6 flex gap-4'>
|
||
<div onClick={() => setBankSelected(1)} className={clx(
|
||
'xl:h-16 rounded-xl cursor-pointer flex xl:flex-row flex-col gap-4 items-center text-center py-3 xl:py-0 xl:text-right px-4 border border-border xl:w-[240px]',
|
||
bankSelected === 1 && 'border-black'
|
||
)}>
|
||
<img src={SamanImage} className='w-10' />
|
||
<div>
|
||
<div>
|
||
بانک پارسیان
|
||
</div>
|
||
<div className='text-xs mt-1 text-description'>
|
||
تمام کارت های عضو شتاب
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div onClick={() => setBankSelected(2)} className={clx(
|
||
'xl:h-16 rounded-xl cursor-pointer flex xl:flex-row flex-col gap-4 items-center text-center py-3 xl:py-0 xl:text-right px-4 border border-border xl:w-[240px]',
|
||
bankSelected === 2 && 'border-black'
|
||
)}>
|
||
<img src={SamanImage} className='w-10' />
|
||
<div>
|
||
<div>
|
||
بانک پارسیان
|
||
</div>
|
||
<div className='text-xs mt-1 text-description'>
|
||
تمام کارت های عضو شتاب
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-10 flex justify-end'>
|
||
<Button
|
||
label={t('wallet.pay')}
|
||
className='w-[180px]'
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Online |