refactor(FE): Update input components to adjust spacing and text size

This commit is contained in:
rstubryan
2026-02-26 14:11:33 +07:00
parent da1cdfb59e
commit da0be9cb52
4 changed files with 18 additions and 8 deletions
+8 -2
View File
@@ -134,14 +134,20 @@ const DropFileInput: React.FC<DropFileInputProps> = ({
{!isError && bottomLabel && ( {!isError && bottomLabel && (
<p <p
className={cn('w-full text-sm opacity-60', className?.bottomLabel)} className={cn(
'w-full mt-1.5 text-xs opacity-60',
className?.bottomLabel
)}
> >
{bottomLabel} {bottomLabel}
</p> </p>
)} )}
{isError && ( {isError && (
<p <p
className={cn('w-full text-sm text-error', className?.errorMessage)} className={cn(
'w-full mt-1.5 text-xs text-error',
className?.errorMessage
)}
> >
{errorMessage} {errorMessage}
</p> </p>
+2 -2
View File
@@ -144,12 +144,12 @@ export const RadioGroup = ({
{/* Label bawah */} {/* Label bawah */}
{!isError && bottomLabel && ( {!isError && bottomLabel && (
<p className='text-sm opacity-60'>{bottomLabel}</p> <p className='mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
)} )}
{/* Pesan error */} {/* Pesan error */}
{isError && errorMessage && ( {isError && errorMessage && (
<p className='text-sm text-error'>{errorMessage}</p> <p className='mt-1.5 text-xs text-error'>{errorMessage}</p>
)} )}
</div> </div>
</RadioGroupContext.Provider> </RadioGroupContext.Provider>
+4 -2
View File
@@ -488,9 +488,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
/> />
)} )}
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>} {isError && (
<p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
)}
{!isError && bottomLabel && ( {!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p> <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
)} )}
</div> </div>
); );
+4 -2
View File
@@ -159,9 +159,11 @@ const TagInput: React.FC<TagInputProps> = ({
{/* Bottom label or error message */} {/* Bottom label or error message */}
{!isError && bottomLabel && ( {!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p> <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
)}
{isError && (
<p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
)} )}
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
</div> </div>
); );
}; };