announcement and criticisms and wallet and learning and setting

2024-12-31 15:55:30 +03:30
parent 7a5d9d6447
commit bdeb5a11d3
21 changed files with 1303 additions and 9 deletions
@@ -0,0 +1,111 @@
+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-6 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-6 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-6 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-6 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-6 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(
+                        'h-16 rounded-xl cursor-pointer flex gap-4 items-center px-4 border border-border 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(
+                        'h-16 rounded-xl cursor-pointer flex gap-4 items-center px-4 border border-border 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