invoice bg cover service

src/components/TrashWithConfrim.tsx

@@ -0,0 +1,30 @@
+import { Trash } from 'iconsax-react'
+import { FC, useState } from 'react'
+import ModalConfrim from './ModalConfrim'
+
+interface Props {
+    onDelete: () => void,
+    isLoading?: boolean
+}
+
+const TrashWithConfrim: FC<Props> = ({ onDelete, isLoading = false }) => {
+    const [isConfirm, setIsConfirm] = useState(false)
+    return (
+        <div>
+            <Trash
+                onClick={() => setIsConfirm(true)}
+                className='size-5'
+                color='#888'
+            />
+
+            <ModalConfrim
+                isOpen={isConfirm}
+                close={() => setIsConfirm(false)}
+                onConfrim={() => onDelete()}
+                isLoading={isLoading}
+            />
+        </div>
+    )
+}
+
+export default TrashWithConfrim

src/components/UploadBoxDraggble.tsx

@@ -2,6 +2,7 @@ import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
 import { FC, useCallback, useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
+import { clx } from '../helpers/utils';
 
 type Props = {
     label: string;
@@ -9,7 +10,9 @@ type Props = {
     isMultiple?: boolean;
     isFile?: boolean,
     preview?: string[],
-    onChangePreview?: (preview: string[]) => void
+    onChangePreview?: (preview: string[]) => void,
+    getCover?: (url: string) => void,
+    coverUrl?: string
 }
 
 const UploadBoxDraggble: FC<Props> = (props: Props) => {
@@ -18,6 +21,7 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
     const [files, setFiles] = useState<File[]>([])
     const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
     const [isFill, setIsFill] = useState<boolean>(false)
+    const [cover, setCover] = useState<string>(props.coverUrl ? props.coverUrl : '')
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
         if (props.isMultiple) {
@@ -60,6 +64,10 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
 
     }, [props.preview, isFill])
 
+    useEffect(() => {
+        setCover(props.coverUrl ? props.coverUrl : '')
+    }, [props.coverUrl])
+
 
     return (
         <div>
@@ -90,7 +98,16 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
                                 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' />
+                                            <img onClick={() => {
+                                                if (props.getCover) {
+                                                    setCover(item)
+                                                    props.getCover(item)
+                                                }
+                                            }} src={item}
+                                                className={clx(
+                                                    'size-10 rounded-full object-cover',
+                                                    cover === item ? 'border-2 border-red-400' : ''
+                                                )} />
                                             <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>