danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add service

Browse Source
This commit is contained in:
hamid zarghami
2025-01-25 09:36:55 +03:30
parent b9b2283ba4
commit d0c8a14be4
8 changed files with 275 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/service/AddService.tsx
+130 -48
View File
@@ -1,64 +1,146 @@
import { FC } from 'react'
import { FC, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Select from '../../components/Select'
import Quill from 'quill';
import SwitchComponent from '../../components/Switch';
import CheckBoxComponent from '../../components/CheckBoxComponent';
import UploadBoxDraggble from '../../components/UploadBoxDraggble';
const AddService: FC = () => {
const { t } = useTranslation('global')
useEffect(() => {
new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: [
[{ header: '1' }, { header: '2' }, { font: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
['bold', 'italic', 'underline'],
['link', 'image'],
[{ align: [] }],
['clean']
]
}
});
}, []);
return (
<div className='w-full flex gap-6 mt-4'>
<div className='flex-1'>
<div>
{t('service.add_service')}
</div>
<div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
<Input
label={t('service.service_name')}
/>
<div className='mt-8'>
<Input
label={t('service.description_short')}
/>
</div>
<div className='mt-8 rowTwoInput'>
<Input
label={t('service.company_developed')}
/>
<Input
label={t('service.year_make')}
/>
</div>
<div className='mt-8 rowTwoInput'>
<Input
label={t('service.user_count')}
/>
<Select
label={t('service.lang_app')}
items={[
{
label: 'فارسی',
value: ''
}
]}
placeholder={t('select')}
/>
</div>
<div className='mt-8'>
</div>
</div>
<div className='w-full mt-4'>
<div>
{t('service.add_service')}
</div>
<div className='flex gap-6'>
<div className='flex-1'>
<div className='bg-white w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
<div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
<Input
label={t('service.service_name')}
/>
<div className='mt-8'>
<Input
label={t('service.description_short')}
/>
</div>
<div className='mt-8 rowTwoInput'>
<Input
label={t('service.company_developed')}
/>
<Input
label={t('service.year_make')}
/>
</div>
<div className='mt-8 rowTwoInput'>
<Input
label={t('service.user_count')}
/>
<Select
label={t('service.lang_app')}
items={[
{
label: 'فارسی',
value: ''
}
]}
placeholder={t('select')}
/>
</div>
<div className='mt-8'>
<div id='editor' style={{ minHeight: '120px' }}></div>
</div>
</div>
</div>
<div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
<div className='flex justify-between'>
<div className='text-sm'>
{t('service.service_status')}
</div>
<div className='flex gap-1'>
<SwitchComponent active onChange={() => null} />
</div>
</div>
<div className='mt-8 items-center flex '>
<CheckBoxComponent
checked
onChange={() => null}
/>
<div>{t('service.special_danak')}</div>
</div>
<div className='mt-8'>
<Input
label={t('service.service_link')}
/>
</div>
<div className='mt-8'>
<div>{t('service.category')}</div>
<div className='mt-2 border border-border rounded-xl p-4'>
<div className='flex items-center'>
<CheckBoxComponent
checked
onChange={() => null}
/>
<div>لورم ایپسوم</div>
</div>
<div className='flex items-center'>
<CheckBoxComponent
checked
onChange={() => null}
/>
<div>لورم ایپسوم</div>
</div>
</div>
</div>
<div className='mt-8'>
<div>{t('service.service_icon')}</div>
<div className='mt-2'>
<UploadBoxDraggble
label={t('service.upload_icon_service')}
onChange={() => null}
/>
</div>
</div>
<div className='mt-8'>
<div>{t('service.service_images')}</div>
<div className='mt-2'>
<UploadBoxDraggble
label={t('service.upload_images_service')}
onChange={() => null}
/>
</div>
</div>
</div>
</div>
</div>
)