29 lines
1009 B
TypeScript
29 lines
1009 B
TypeScript
import { forwardRef } from 'react';
|
|
import { Text } from './Text';
|
|
import { Box } from './Box';
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
variant?: 'default' | 'error';
|
|
errorMessage?: string;
|
|
}
|
|
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
({ className = '', variant = 'default', errorMessage, ...props }, ref) => {
|
|
const baseClasses = 'px-3 py-2 border rounded-lg text-white bg-deep-graphite focus:outline-none focus:border-primary-blue transition-colors w-full';
|
|
const variantClasses = (variant === 'error' || errorMessage) ? 'border-racing-red' : 'border-charcoal-outline';
|
|
const classes = `${baseClasses} ${variantClasses} ${className}`;
|
|
|
|
return (
|
|
<Box fullWidth>
|
|
<input ref={ref} className={classes} {...props} />
|
|
{errorMessage && (
|
|
<Text size="xs" color="text-error-red" block mt={1}>
|
|
{errorMessage}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
);
|
|
|
|
Input.displayName = 'Input'; |