create discount and ads section
This commit is contained in:
HAM!DREZA
@@ -0,0 +1,190 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../components/Input'
|
||||
import Button from '../../components/Button'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { TickCircle, TickSquare, Refresh } from 'iconsax-react'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import ImageUploader from './components/ImageUploader'
|
||||
import RadioGroup from '../../components/RadioGroup'
|
||||
const CreateTicket: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('discount.new_discount')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('discount.submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex gap-6 xl:mt-8 mt-4'>
|
||||
<div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||||
<div className='mt-6'>
|
||||
{t('discount.type')}
|
||||
<div className='rowTwoInput mt-2'>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{
|
||||
label: t('discount.direct_discount'),
|
||||
value: '3month'
|
||||
},
|
||||
{
|
||||
label: t('discount.discount_code'),
|
||||
value: 'year'
|
||||
}
|
||||
]}
|
||||
onChange={''}
|
||||
selected={''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<Input
|
||||
label={t('discount.title')}
|
||||
placeholder={t('discount.enter_discount_description')}
|
||||
/>
|
||||
|
||||
<div className='w-full mt-7 flex items-center'>
|
||||
<button className='text-xs border h-full w-[142px] border-black rounded-xl flex justify-center items-center gap-2'>
|
||||
<Refresh
|
||||
size={18} color='black'
|
||||
/>
|
||||
<p>
|
||||
{t('discount.auto_generate_code')}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
|
||||
|
||||
<div className='w-full'>
|
||||
|
||||
{t('discount.price')}
|
||||
<div className='rowTwoInput mt-2'>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{
|
||||
label: t('discount.fixed_amount'),
|
||||
value: '3month'
|
||||
},
|
||||
{
|
||||
label: t('discount.percent'),
|
||||
value: 'year'
|
||||
}
|
||||
]}
|
||||
onChange={''}
|
||||
selected={''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label={t('discount.price_or_percent')}
|
||||
placeholder={t('discount.enter_price_or_percent')}
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<DatePickerComponent
|
||||
label={t('discount.startDate')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
<DatePickerComponent
|
||||
label={t('discount.endDate')}
|
||||
onChange={() => { }}
|
||||
placeholder=''
|
||||
defaulValue='1400-01-01'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='min-h-[calc(100vh-201px)] bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
|
||||
<div className='text-sm flex items-center justify-between'>
|
||||
<p>
|
||||
{t('discount.service_status')}
|
||||
</p>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<div>
|
||||
{t('ads.deactive')}
|
||||
</div>
|
||||
<SwitchComponent
|
||||
active={false}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className='mt-6 text-sm'>{t('discount.availabe_service')}</p>
|
||||
<div className='p-2 border border-[##D0D0D0] rounded-lg mt-2'>
|
||||
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('header.search')}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start gap-2 py-2'>
|
||||
<div>
|
||||
<TickSquare size={20} color='black' variant='Bold' />
|
||||
</div>
|
||||
<div className='text-xs leading-5'>
|
||||
لورم ایپسوم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateTicket
|
||||
@@ -0,0 +1,116 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } from 'iconsax-react'
|
||||
import Td from '../../components/Td'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import Input from '../../components/Input'
|
||||
const TicketList: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
return (
|
||||
<div className='mt-4 min-h-[500px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('discount.list')}
|
||||
</div>
|
||||
|
||||
<Link to={Pages.discount.create}>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add size={20} color='white' />
|
||||
<div>
|
||||
{t('discount.add_new_discount')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-end items-center'>
|
||||
|
||||
<div className='xl:w-[300px] w-full'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('ads.search')}
|
||||
className='bg-white w-full'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('discount.number')} />
|
||||
<Td text={t('discount.type')} />
|
||||
<Td text={t('discount.code')} />
|
||||
<Td text={t('discount.startDate')} />
|
||||
<Td text={t('discount.endDate')} />
|
||||
<Td text={t('discount.price_or_percent')} />
|
||||
<Td text={t('discount.service')} />
|
||||
<Td text={t('discount.status')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text={t('discount.number')} />
|
||||
<Td text={t('discount.type')} />
|
||||
<Td text={t('discount.code')} />
|
||||
<Td text={t('discount.startDate')} />
|
||||
<Td text={t('discount.endDate')} />
|
||||
<Td text={t('discount.price_or_percent')} />
|
||||
<Td text={t('discount.service')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text={t('discount.number')} />
|
||||
<Td text={t('discount.type')} />
|
||||
<Td text={t('discount.code')} />
|
||||
<Td text={t('discount.startDate')} />
|
||||
<Td text={t('discount.endDate')} />
|
||||
<Td text={t('discount.price_or_percent')} />
|
||||
<Td text={t('discount.service')} />
|
||||
<Td text={t('')}>
|
||||
<SwitchComponent
|
||||
active={true}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.discount + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TicketList
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
import { FC, useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Image, DocumentUpload } from 'iconsax-react'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
|
||||
|
||||
|
||||
const ImageUploader: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
setFile(acceptedFiles[0])
|
||||
}, [])
|
||||
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
||||
|
||||
return(
|
||||
<>
|
||||
<p className='mt-6 text-sm'>{t('ads.upload_picture')}</p>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className='py-12 border border-dashed border-[#8C90A3] rounded-lg mt-2 flex items-center justify-center'>
|
||||
<div className='flex flex-col items-center space-y-4'>
|
||||
<Image size={45} color='#8C90A3' variant="Bold" className='border-[3px] border-[#8C90A3] rounded-md'
|
||||
/>
|
||||
<p className='text-sm text-[#8C90A3]'>
|
||||
{
|
||||
file ?
|
||||
file.name
|
||||
:
|
||||
t('ads.to_upload_message')
|
||||
|
||||
}
|
||||
</p>
|
||||
<div className='flex gap-1'>
|
||||
<DocumentUpload
|
||||
size={20}
|
||||
color='black'
|
||||
/>
|
||||
<button className='text-sm'>
|
||||
<input {...getInputProps()} />
|
||||
{t('ads.upload')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default ImageUploader
|
||||
Reference in New Issue
Block a user