add service

package-lock.json

@@ -14,6 +14,7 @@
         "formik": "^2.4.6",
         "i18next": "^24.2.0",
         "iconsax-react": "^0.0.8",
+        "quill": "^2.0.3",
         "rc-rate": "^2.13.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -2870,6 +2871,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2877,6 +2884,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -3588,6 +3601,18 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3818,6 +3843,12 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/parchment": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
+      "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4142,6 +4173,35 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quill": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.3.tgz",
+      "integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "eventemitter3": "^5.0.1",
+        "lodash-es": "^4.17.21",
+        "parchment": "^3.0.0",
+        "quill-delta": "^5.1.0"
+      },
+      "engines": {
+        "npm": ">=8.2.3"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
+      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
     "node_modules/rc-rate": {
       "version": "2.13.0",
       "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.13.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "formik": "^2.4.6",
     "i18next": "^24.2.0",
     "iconsax-react": "^0.0.8",
+    "quill": "^2.0.3",
     "rc-rate": "^2.13.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/App.tsx

@@ -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'

src/components/CheckBoxComponent.tsx

@@ -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

src/components/UploadBoxDraggble.tsx

@@ -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

src/index.css

@@ -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;
+}

src/langs/fa.json

@@ -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": "صفحه اصلی",

src/pages/service/AddService.tsx

@@ -1,19 +1,40 @@
-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='w-full mt-4'>
-            <div className='flex-1'>
             <div>
                 {t('service.add_service')}
             </div>
+            <div className='flex gap-6'>
+                <div className='flex-1'>
+
 
                     <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                         <Input
@@ -52,13 +73,74 @@ const AddService: FC = () => {
                         </div>
 
                         <div className='mt-8'>
-
+                            <div id='editor' style={{ minHeight: '120px' }}></div>
                         </div>
                     </div>
                 </div>
 
-            <div className='bg-white w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
+                <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>
     )