add service
This commit is contained in:
hamid zarghami
@@ -2,6 +2,7 @@ import { FC, useEffect, useState } from 'react'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import 'swiper/swiper-bundle.css';
|
||||
import 'rc-rate/assets/index.css';
|
||||
import "quill/dist/quill.snow.css";
|
||||
import i18next from 'i18next'
|
||||
import { I18nextProvider } from 'react-i18next'
|
||||
import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { FC } from 'react'
|
||||
import { Checkbox } from '@material-tailwind/react';
|
||||
|
||||
type Props = {
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
checked: boolean;
|
||||
}
|
||||
|
||||
const CheckBoxComponent: FC<Props> = (props: Props) => {
|
||||
return (
|
||||
<Checkbox checked={props.checked} onChange={props.onChange} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} crossOrigin={undefined} />
|
||||
)
|
||||
}
|
||||
|
||||
export default CheckBoxComponent
|
||||
@@ -0,0 +1,42 @@
|
||||
import { DocumentUpload, Gallery } from 'iconsax-react'
|
||||
import { FC, useCallback } from 'react'
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
onChange: (file: File) => void;
|
||||
}
|
||||
|
||||
const UploadBoxDraggble: FC<Props> = (props: Props) => {
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
props.onChange(acceptedFiles[0])
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
||||
|
||||
return (
|
||||
<div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
|
||||
<input {...getInputProps()} />
|
||||
<Gallery
|
||||
className='size-8'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-description text-xs'>
|
||||
{props.label}
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-2'>
|
||||
<DocumentUpload
|
||||
className='size-4'
|
||||
color='black'
|
||||
/>
|
||||
<div className='text-xs'>{t('upload')}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UploadBoxDraggble
|
||||
@@ -126,3 +126,19 @@ tbody tr {
|
||||
.overflowX::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ql-toolbar:first-child {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
@apply rounded-b-xl text-right;
|
||||
font-family: irancell !important;
|
||||
direction: rtl;
|
||||
}
|
||||
.ql-toolbar {
|
||||
@apply rounded-t-xl;
|
||||
}
|
||||
.ql-editor {
|
||||
@apply !text-right;
|
||||
}
|
||||
|
||||
+10
-1
@@ -123,8 +123,17 @@
|
||||
"add_service": "افزودن سرویس",
|
||||
"service_name": "نام سرویس",
|
||||
"description_short": "توضیح کوتاه سرویس",
|
||||
"company_developed": "شرکت توسعه دهنده"
|
||||
"company_developed": "شرکت توسعه دهنده",
|
||||
"service_status": "وضعیت سرویس",
|
||||
"special_danak": "این سرویس پیشنهاد ویژه داناک هست",
|
||||
"service_link": "لینک دریافت سرویس",
|
||||
"category": "دسته بندی",
|
||||
"service_icon": "آیکون سرویس",
|
||||
"upload_icon_service": "آیکون سرویس مورد نظر را آپلود کنید",
|
||||
"service_images": "تصاویر سرویس",
|
||||
"upload_images_service": "تصاویر سرویس مورد نظر را آپلود کنید"
|
||||
},
|
||||
"upload": "آپلود",
|
||||
"select": "انتخاب",
|
||||
"footer": {
|
||||
"home": "صفحه اصلی",
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user