fda0a6791f
* style: project select dropdown ui improvement * style: create/update cycle modal ui improvement * style: create/update module modal ui improvement * fix: build error * style: input and textarea border improvement * cycle and module modal ui improvement * style: cycle and module modal ui improvement
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import * as React from "react";
|
|
|
|
export interface InputProps
|
|
extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
mode?: "primary" | "transparent" | "true-transparent";
|
|
inputSize?: "sm" | "md";
|
|
hasError?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
|
const {
|
|
id,
|
|
type,
|
|
name,
|
|
mode = "primary",
|
|
inputSize = "sm",
|
|
hasError = false,
|
|
className = "",
|
|
...rest
|
|
} = props;
|
|
|
|
return (
|
|
<input
|
|
id={id}
|
|
ref={ref}
|
|
type={type}
|
|
name={name}
|
|
className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
|
|
mode === "primary"
|
|
? "rounded-md border-[0.5px] border-custom-border-200"
|
|
: mode === "transparent"
|
|
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
|
|
: mode === "true-transparent"
|
|
? "rounded border-none bg-transparent ring-0"
|
|
: ""
|
|
} ${hasError ? "border-red-500" : ""} ${
|
|
hasError && mode === "primary" ? "bg-red-500/20" : ""
|
|
} ${
|
|
inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""
|
|
} ${className}`}
|
|
{...rest}
|
|
/>
|
|
);
|
|
});
|
|
|
|
Input.displayName = "form-input-field";
|
|
|
|
export { Input };
|