receip and ticket and ...

src/components/Button.tsx

@@ -12,7 +12,7 @@ type Props = {
 const Button: FC<Props> = memo((props: Props) => {
 
     const buttonClass = clx(
-        'flex rounded-xl items-center justify-center text-center h-12 text-sm  bg-primary text-white w-full',
+        'flex rounded-xl items-center justify-center text-center h-10 text-sm  bg-primary text-white w-full',
         props.disabled && 'cursor-not-allowed opacity-60',
         props.className
     );

src/components/Input.tsx

@@ -22,7 +22,7 @@ const Input: FC<Props> = (props: Props) => {
 
     const inputClass = clx(
         'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
-        props.readOnly && 'bg-gray-100',
+        props.readOnly && 'bg-gray-100 border-0 text-description',
         props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
         props.className
     );
@@ -34,7 +34,7 @@ const Input: FC<Props> = (props: Props) => {
                 {props.label}
             </label>
 
-            <div className='w-full relative'>
+            <div className='w-full relative mt-1'>
                 <input {...props} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
 
                 {

src/components/Select.tsx

@@ -1,4 +1,5 @@
 import { FC, SelectHTMLAttributes } from 'react'
+import { clx } from '../helpers/utils'
 
 export type ItemsSelectType = {
     value: string,
@@ -9,12 +10,20 @@ type Props = {
     items: ItemsSelectType[],
     error_text?: string,
     placeholder?: string,
+    label?: string,
 } & SelectHTMLAttributes<HTMLSelectElement>
 
 const Select: FC<Props> = (props: Props) => {
     return (
         <div className='w-full relative'>
-            <select {...props} className={`w-full text-black block px-2.5 h-10 text-sm rounded-2.5 bg-gray ${props.className}`}>
+            <label className='text-sm'>
+                {props.label}
+            </label>
+            <select {...props} className={clx(
+                'w-full text-black block border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
+                props.className,
+                props.label && 'mt-1'
+            )}>
                 {
                     props.placeholder &&
                     <option value="" disabled selected>{props.placeholder}</option>

src/components/Textarea.tsx

@@ -0,0 +1,25 @@
+import { FC, InputHTMLAttributes } from 'react'
+
+type Props = {
+    label: string,
+} & InputHTMLAttributes<HTMLTextAreaElement>
+
+const Textarea: FC<Props> = (props: Props) => {
+    return (
+        <div className='w-full relative'>
+            <label className='text-sm'>
+                {props.label}
+            </label>
+
+            <textarea
+                className='border border-border w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs'
+                {...props}
+            >
+
+            </textarea>
+
+        </div>
+    )
+}
+
+export default Textarea

src/components/UploadBox.tsx

@@ -0,0 +1,44 @@
+import { FC, useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDropzone } from 'react-dropzone'
+
+
+type Props = {
+    label: string,
+}
+
+const UploadBox: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        setFile(acceptedFiles[0])
+    }, [])
+    const { getRootProps, getInputProps } = useDropzone({ onDrop })
+
+
+    return (
+        <div>
+            <div className='text-sm'>{props.label}</div>
+            <div className='w-full h-10 mt-1 border border-border rounded-xl items-center px-2 flex gap-2.5'>
+                <button {...getRootProps()} className=' w-fit h-7 rounded-lg text-xs px-6 bg-secondary'>
+                    <input {...getInputProps()} />
+
+                    {t('select_file')}
+                </button>
+
+                <div className='text-description text-xs'>
+                    {
+                        file ?
+                            file.name
+                            :
+                            t('no_select_file')
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UploadBox