forked from github/plane
8a95a41100
Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: Bavisetti Narayan <narayan@Bavisettis-MacBook-Pro.local> Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com> Co-authored-by: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import React, { forwardRef, Ref } from "react";
|
|
|
|
// types
|
|
interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
mode?: "primary" | "transparent" | "trueTransparent";
|
|
error?: boolean;
|
|
inputSize?: "rg" | "lg";
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export const Input = forwardRef((props: Props, ref: Ref<HTMLInputElement>) => {
|
|
const { mode = "primary", error, className = "", type, fullWidth = true, id, inputSize = "rg", ...rest } = props;
|
|
|
|
return (
|
|
<input
|
|
id={id}
|
|
ref={ref}
|
|
type={type}
|
|
className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
|
|
mode === "primary"
|
|
? "rounded-md border border-custom-border-200"
|
|
: mode === "transparent"
|
|
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
|
|
: mode === "trueTransparent"
|
|
? "rounded border-none bg-transparent ring-0"
|
|
: ""
|
|
} ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-500/20" : ""} ${
|
|
fullWidth ? "w-full" : ""
|
|
} ${inputSize === "rg" ? "px-3 py-2" : inputSize === "lg" ? "p-3" : ""} ${className}`}
|
|
{...rest}
|
|
/>
|
|
);
|
|
});
|
|
|
|
Input.displayName = "Input";
|
|
|
|
export default Input;
|