hamid zarghami
72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { FC, useState } from 'react'
|
||
import RadioGroup from '../../../components/RadioGroup'
|
||
import { useTranslation } from 'react-i18next'
|
||
import ShareIcon from '../../../assets/images/share.svg'
|
||
import Button from '../../../components/Button'
|
||
import { ArrowLeft } from 'iconsax-react'
|
||
|
||
const ServiceHeader: FC = () => {
|
||
|
||
const { t } = useTranslation('global')
|
||
const [planSelected, setPlanSelected] = useState<'year' | '3month' | 'month'>('year')
|
||
|
||
return (
|
||
<div className='w-full p-6 bg-white rounded-3xl flex justify-between'>
|
||
<div className='flex gap-8'>
|
||
<div className='size-[70px] bg-blue-400 rounded-xl'></div>
|
||
<div>
|
||
<div>
|
||
دی منو
|
||
</div>
|
||
<div className='text-xs mt-3 text-[#4E505A]'>
|
||
منوی رستوران
|
||
</div>
|
||
<p className='text-description mt-1 text-[11px]'>
|
||
دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
|
||
</p>
|
||
<div className='flex gap-5 mt-5'>
|
||
<RadioGroup
|
||
items={[
|
||
{
|
||
label: t('service.year'),
|
||
value: 'year'
|
||
},
|
||
{
|
||
label: t('service.month3'),
|
||
value: '3month'
|
||
},
|
||
{
|
||
label: t('service.month'),
|
||
value: 'month'
|
||
}
|
||
]}
|
||
onChange={setPlanSelected}
|
||
selected={planSelected}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex flex-col justify-between items-end'>
|
||
<div className='size-9 bg-description rounded-xl flex justify-center items-center'>
|
||
<img src={ShareIcon} className='w-4' />
|
||
</div>
|
||
<div className='flex gap-4 items-center'>
|
||
<div className='text-xs whitespace-nowrap'>2,000,000 تومان {t('service.year')}</div>
|
||
<Button
|
||
className='bg-description text-xs h-8 bg-opacity-20 text-black px-4'
|
||
>
|
||
<div className='flex gap-1 items-center'>
|
||
<div>
|
||
{t('service.buy')}
|
||
</div>
|
||
<ArrowLeft className='size-4' color='black' />
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ServiceHeader |