(fix:input) remove ambiguous label prop

This commit is contained in:
ManishMadan2882
2025-03-07 17:10:48 +05:30
parent 25dfd63c4f
commit 71e45860f3

View File

@@ -8,13 +8,13 @@ const Input = ({
value,
isAutoFocused = false,
placeholder,
label,
required = false,
maxLength,
className,
className = '',
colorVariant = 'silver',
borderVariant = 'thick',
children,
labelBgClassName = 'bg-white dark:bg-raisin-black',
onChange,
onPaste,
onKeyDown,
@@ -32,15 +32,15 @@ const Input = ({
const inputRef = useRef<HTMLInputElement>(null);
return (
<div className="relative">
<div className={`relative ${className}`}>
<input
ref={inputRef}
className={`peer h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white placeholder-transparent ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
className={`peer h-[42px] w-full rounded-full px-3 py-1 bg-transparent outline-none dark:text-white placeholder-transparent ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
type={type}
id={id}
name={name}
autoFocus={isAutoFocused}
placeholder={placeholder || label || ''}
placeholder={placeholder || ''}
maxLength={maxLength}
value={value}
onChange={onChange}
@@ -50,17 +50,16 @@ const Input = ({
>
{children}
</input>
{(label || placeholder) && (
{placeholder && (
<label
htmlFor={id}
className={`absolute left-3 -top-2.5 bg-white px-2 text-xs transition-all
peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3
peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-4000
peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs peer-focus:text-gray-4000
dark:bg-[#26272E] dark:text-silver dark:peer-placeholder-shown:text-gray-400
cursor-none pointer-events-none`}
className={`absolute left-3 -top-2.5 px-2 text-xs transition-all
peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:text-base
peer-placeholder-shown:text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs
peer-focus:text-gray-4000 dark:text-silver dark:peer-placeholder-shown:text-gray-400
cursor-none pointer-events-none ${labelBgClassName}`}
>
{label || placeholder}
{placeholder}
{required && (
<span className="text-[#D30000] dark:text-[#D42626] ml-0.5">*</span>
)}