add service

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