hamid zarghami
102 lines
5.1 KiB
TypeScript
102 lines
5.1 KiB
TypeScript
import { useState } from 'react'
|
||
import book from '../../assets/images/books.jpg'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Tabs from '../../components/Tabs'
|
||
import { MoneyTick, MoneyTime } from 'iconsax-react'
|
||
import Input from '../../components/Input'
|
||
import Button from '../../components/Button'
|
||
import RadioGroup from '../../components/RadioGroup'
|
||
import bank from '../../assets/images/bank.png'
|
||
const PaymentDetails = () => {
|
||
const [activeTab, setActiveTab] = useState<string>('unpaid')
|
||
const { t } = useTranslation('global')
|
||
return (
|
||
<div className='pb-[120px]'>
|
||
<div className="rounded-[32px] bg-white py-6 flex items-center gap-4 px-6">
|
||
<img src={book} className='w-[95px] h-[95px] rounded-2xl' alt="" />
|
||
<div className='space-y-2'>
|
||
<h2 className='text-[14px]'>دوره مقدماتی</h2>
|
||
<div className='space-y-[2px]'>
|
||
<p className='text-[10px] text-description'>1 شنبه - 2 شنبه، ساعت 2 تا 4 عصر</p>
|
||
<div className='flex items-center gap-1 text-[13px]'>
|
||
<p className='text-description'>پیش پرداخت :</p>
|
||
<p>500,000 تومان</p>
|
||
</div>
|
||
<div className='flex items-center gap-1 text-[13px]'>
|
||
<p className='text-description'>کل مبلغ دوره :</p>
|
||
<p>500,000 تومان</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='mt-6 w-full'>
|
||
<Tabs
|
||
isFullWidth
|
||
active={activeTab}
|
||
items={[
|
||
{
|
||
icon: <MoneyTime color={activeTab === 'unpaid' ? 'black' : '#8C90A3'} size={22} />,
|
||
label: t('payment.prePay'),
|
||
value: 'unpaid'
|
||
},
|
||
{
|
||
icon: <MoneyTick color={activeTab === 'not_confimed' ? 'black' : '#8C90A3'} size={22} />,
|
||
label: t('payment.fullPay'),
|
||
value: 'not_confimed'
|
||
}
|
||
]}
|
||
onChange={setActiveTab}
|
||
/>
|
||
</div>
|
||
<div className="rounded-[32px] bg-white py-6 mt-6 gap-4 px-6">
|
||
<h2 className='text-[14px]'>{t('payment.fullPay')}</h2>
|
||
<div className='flex items-end mt-4 gap-2 justify-between'>
|
||
<Input placeholder='کد تخفیف' />
|
||
<Button className='bg-white text-xs text-black border border-black max-w-[80px]' label='اعمال' />
|
||
</div>
|
||
<div className='flex items-center text-xs gap-3 my-6'>
|
||
<p className='text-description'>مبلغ قابل پرداخت</p>
|
||
<div className='border-b border-dashed border-description flex-1'></div>
|
||
<p>1,000,000 تومان</p>
|
||
</div>
|
||
<div className='flex items-center gap-2'>
|
||
<RadioGroup
|
||
items={[
|
||
{
|
||
label: t('استفاده از موجودی کیف پول'),
|
||
value: '3month'
|
||
},
|
||
{
|
||
label: t('پرداخت مستقیم'),
|
||
value: 'year'
|
||
}
|
||
]}
|
||
onChange={() => ''}
|
||
selected={''}
|
||
/>
|
||
</div>
|
||
<div className='text-xs gap-3 my-6'>
|
||
<h2 className='text-[14px]'>روش پرداخت</h2>
|
||
<div className='grid grid-cols-2 gap-2 mt-4'>
|
||
<div className='border border-black rounded-2xl flex items-center justify-center'>
|
||
<div className='text-center flex flex-col items-center space-y-1 py-4'>
|
||
<img src={bank} className='h-[50px] w-[50px]' alt="" />
|
||
<p>بانک پارسیان</p>
|
||
<p className='text-description text-[10px]'>تمام کارت های عضو شتاب</p>
|
||
</div>
|
||
</div>
|
||
<div className='border border-black rounded-2xl flex items-center justify-center'>
|
||
<div className='text-center flex flex-col items-center space-y-1 py-4'>
|
||
<img src={bank} className='h-[50px] w-[50px]' alt="" />
|
||
<p>بانک پارسیان</p>
|
||
<p className='text-description text-[10px]'>تمام کارت های عضو شتاب</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PaymentDetails |