Spaces:
Paused
Paused
File size: 2,114 Bytes
56c7b6d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import React from 'react';
import { motion, type HTMLMotionProps } from 'framer-motion';
import { cn } from '@/utils/helpers';
interface InputProps extends Omit<HTMLMotionProps<'input'>, 'ref'> {
label?: string;
error?: string;
icon?: React.ReactNode;
helperText?: string;
containerClassName?: string;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
(
{
label,
error,
icon,
helperText,
containerClassName,
className,
...props
},
ref
) => {
return (
<div className={cn('w-full', containerClassName)}>
{label && (
<label className="block text-sm font-medium text-slate-300 mb-2">
{label}
{props.required && <span className="text-red-500 ml-1">*</span>}
</label>
)}
<div className="relative">
{icon && (
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
{icon}
</div>
)}
<motion.input
ref={ref}
whileFocus={{
boxShadow: '0 0 0 3px rgba(34, 197, 94, 0.1)',
}}
className={cn(
'w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2.5',
'text-slate-50 placeholder-slate-500',
'transition-all duration-200',
'focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20',
icon && 'pl-10',
error && 'border-red-500 focus:border-red-500 focus:ring-red-500/20',
className
)}
{...props}
/>
</div>
{error && (
<motion.p
initial={{ opacity: 0, y: -4 }}
animate={{ opacity: 1, y: 0 }}
className="text-sm text-red-500 mt-1"
>
{error}
</motion.p>
)}
{helperText && !error && (
<p className="text-xs text-slate-500 mt-1">{helperText}</p>
)}
</div>
);
}
);
Input.displayName = 'Input';
export default Input;
|