structure and home page and detail company

2025-02-09 14:36:13 +03:30
commit 0341b836f7
111 changed files with 10674 additions and 0 deletions
@@ -0,0 +1,102 @@
+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