ticket

src/components/Button.tsx

@@ -7,7 +7,7 @@ type Props = {
     className?: string;
     isLoading?: boolean,
 } & ButtonHTMLAttributes<HTMLButtonElement> &
-    XOR<{ children: ReactNode }, { label: string, isLoading?: boolean }>;
+    XOR<{ children: ReactNode }, { label: string }>;
 
 const Button: FC<Props> = memo((props: Props) => {
 

src/components/PageLoading.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+import Logo from '../assets/images/logo_orig.svg'
+import { useTranslation } from 'react-i18next'
+
+const PageLoading: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='flex bg-transparent w-fit mx-auto  flex-col gap-4 items-center'>
+            <img src={Logo} alt='logo' className='w-28' />
+            <div className='text-xs text-gray-700'>
+                {t('loading')}
+            </div>
+        </div>
+    )
+}
+
+export default PageLoading

src/components/Select.tsx

@@ -45,7 +45,7 @@ const Select: FC<Props> = (props: Props) => {
             </select>
             <ArrowDown2 size={16} color='black' className={clx(
                 'absolute z-0 top-3 left-2',
-                props.label && 'top-9'
+                props.label && 'top-10'
             )} />
             {
                 props.error_text && props.error_text !== '' ?

src/components/Textarea.tsx

@@ -1,7 +1,9 @@
 import { FC, InputHTMLAttributes } from 'react'
+import Error from './Error'
 
 type Props = {
     label: string,
+    error_text?: string
 } & InputHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea: FC<Props> = (props: Props) => {
@@ -17,6 +19,10 @@ const Textarea: FC<Props> = (props: Props) => {
             >
 
             </textarea>
+            {
+                props.error_text &&
+                <Error errorText={props.error_text} />
+            }
 
         </div>
     )

src/components/UploadBox.tsx

@@ -1,22 +1,51 @@
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDropzone } from 'react-dropzone'
+import { CloseCircle } from 'iconsax-react'
 
 
 type Props = {
     label: string,
+    isMultiple?: boolean,
+    onChange: (file: File[]) => void;
+    isReset?: boolean;
 }
 
 const UploadBox: FC<Props> = (props: Props) => {
 
     const { t } = useTranslation('global')
-    const [file, setFile] = useState<File>()
+    const [files, setFiles] = useState<File[]>([])
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
-        setFile(acceptedFiles[0])
-    }, [])
+        if (props.isMultiple) {
+            const array = [...files]
+            array.push(acceptedFiles[0])
+            setFiles(array)
+            props.onChange(array)
+        } else {
+            setFiles([acceptedFiles[0]])
+            props.onChange([acceptedFiles[0]])
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [files])
     const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
+    const handleRemove = (index: number) => {
+        const array = [...files]
+        array.splice(index, 1)
+        setFiles(array)
+        props.onChange(array)
+    }
+
+    useEffect(() => {
+
+        if (props.isReset) {
+            setFiles([])
+        }
+
+    }, [props.isReset])
+
+
 
     return (
         <div>
@@ -28,15 +57,27 @@ const UploadBox: FC<Props> = (props: Props) => {
                     {t('select_file')}
                 </button>
 
-                <div className='text-description text-xs'>
+                <div className='lg:flex gap-2 hidden'>
                     {
-                        file ?
-                            file.name
-                            :
-                            t('no_select_file')
+                        files?.map((item, index) => (
+                            <div key={index} className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
+                                <CloseCircle onClick={() => handleRemove(index)} size={16} color='red' />
+                                <div className='text-xs'>{item.name}</div>
+                            </div>
+                        ))
                     }
                 </div>
             </div>
+            <div className='lg:hidden gap-2 flex flex-wrap mt-4'>
+                {
+                    files?.map((item, index) => (
+                        <div key={index} className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
+                            <CloseCircle onClick={() => handleRemove(index)} size={16} color='red' />
+                            <div className='text-xs'>{item.name}</div>
+                        </div>
+                    ))
+                }
+            </div>
         </div>
     )
 }