update service

src/components/UploadBoxDraggble.tsx

@@ -1,5 +1,5 @@
 import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 
@@ -8,12 +8,16 @@ type Props = {
     onChange: (file: File[]) => void;
     isMultiple?: boolean;
     isFile?: boolean,
+    preview?: string[],
+    onChangePreview?: (preview: string[]) => void
 }
 
 const UploadBoxDraggble: FC<Props> = (props: Props) => {
 
-    const [files, setFiles] = useState<File[]>([])
     const { t } = useTranslation('global')
+    const [files, setFiles] = useState<File[]>([])
+    const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
+    const [isFill, setIsFill] = useState<boolean>(false)
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
         if (props.isMultiple) {
@@ -36,6 +40,27 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
         props.onChange(array)
     }
 
+    const handleDeletePreview = (index: number) => {
+        const array = [...perviews];
+        array.splice(index, 1);
+        setPerviews(array);
+        if (props.onChangePreview) {
+            props.onChangePreview(array);
+        }
+    }
+
+    useEffect(() => {
+
+        if (props.preview && props.preview.length > 0 && !isFill) {
+            setPerviews(props.preview)
+            console.log('preview', props.preview);
+
+            setIsFill(true)
+        }
+
+    }, [props.preview, isFill])
+
+
     return (
         <div>
             <div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
@@ -58,8 +83,22 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
             </div>
 
             {
-                files.length > 0 && (
+                files.length > 0 || perviews ? (
                     <div className='mt-4 flex gap-4 items-center'>
+                        {
+                            perviews && perviews.map((item, index) => {
+                                return (
+                                    <div key={index} className='flex items-center gap-2'>
+                                        <div key={index} className='flex relative items-center gap-2'>
+                                            <img src={item} className='size-10 rounded-full object-cover' />
+                                            <div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                <CloseCircle className='size-4 ' color='red' />
+                                            </div>
+                                        </div>
+                                    </div>
+                                )
+                            })
+                        }
                         {
                             files.map((file, index) => {
                                 if (props.isFile) {
@@ -88,7 +127,7 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
                             })
                         }
                     </div>
-                )
+                ) : null
             }
 
         </div>