57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
import classNames from "classnames";
|
|
import { initial, isEmpty, omit } from "lodash";
|
|
import React from "react";
|
|
import "../index.css";
|
|
|
|
type Props = {
|
|
inGroup?: boolean,
|
|
placeholder?: string | undefined;
|
|
className?: string | undefined;
|
|
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "">;
|
|
|
|
const inputNotInGroup = [
|
|
`border
|
|
border-2
|
|
border-solid
|
|
border-gray-200
|
|
hover:border-gray-500
|
|
active:border-gray-500
|
|
focus:border-gray-500`
|
|
]
|
|
|
|
const inputInGroup = [
|
|
`border-none
|
|
hover:none
|
|
active:none
|
|
focus:none
|
|
`
|
|
]
|
|
|
|
export const TextInput = ({
|
|
inGroup = false, // We should use this flag to choose how we will style our text input component
|
|
placeholder,
|
|
className,
|
|
...props
|
|
}: Props) => {
|
|
|
|
return (
|
|
<input
|
|
type="text"
|
|
placeholder={placeholder}
|
|
className={classNames([
|
|
"w-full",
|
|
"text-gray-900",
|
|
"rounded",
|
|
"outline-none",
|
|
"placeholder-text-500",
|
|
{
|
|
//it this part we define how we style
|
|
[`${inputNotInGroup}`] : !inGroup,
|
|
[`${inputInGroup}`] : inGroup,
|
|
},
|
|
className,
|
|
])}
|
|
/>
|
|
);
|
|
};
|