init

src/components/input/FileInput.tsx

@@ -0,0 +1,88 @@
+import { Ref } from 'react';
+
+import { cn } from '@/lib/helper';
+import { TextInputProps } from '@/components/input/TextInput';
+
+interface FileInputProps
+  extends Omit<
+    TextInputProps,
+    | 'type'
+    | 'value'
+    | 'isValid'
+    | 'startAdornment'
+    | 'endAdornment'
+    | 'isLoading'
+  > {
+  ref?: Ref<HTMLInputElement>;
+  accept?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    input?: string;
+  };
+}
+
+const FileInput = ({
+  ref,
+  label,
+  bottomLabel,
+  name,
+  placeholder,
+  accept = '*',
+  className,
+  isError,
+  errorMessage,
+  disabled = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+}: FileInputProps) => {
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+        </label>
+      )}
+
+      <input
+        ref={ref}
+        type='file'
+        accept={accept}
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        className={cn(
+          'grow file-input w-full h-12 rounded-lg!',
+          className?.input
+        )}
+        readOnly={readOnly}
+      />
+
+      {bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default FileInput;