51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Ico, Icon } from "components/Ico";
|
|
import { cJoin } from "helpers/className";
|
|
import { isDefinedAndNotEmpty } from "helpers/others";
|
|
|
|
/*
|
|
* ╭─────────────╮
|
|
* ───────────────────────────────────────╯ COMPONENT ╰───────────────────────────────────────────
|
|
*/
|
|
|
|
interface Props {
|
|
value: string;
|
|
onChange: (newValue: string) => void;
|
|
className?: string;
|
|
name?: string;
|
|
placeholder?: string;
|
|
}
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const TextInput = ({
|
|
value,
|
|
onChange,
|
|
className,
|
|
name,
|
|
placeholder,
|
|
}: Props): JSX.Element => (
|
|
<div className={cJoin("relative", className)}>
|
|
<input
|
|
className="w-full"
|
|
type="text"
|
|
name={name}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={(event) => {
|
|
onChange(event.target.value);
|
|
}}
|
|
/>
|
|
{isDefinedAndNotEmpty(value) && (
|
|
<div className="absolute right-4 top-0 bottom-0 grid place-items-center">
|
|
<Ico
|
|
className="cursor-pointer !text-xs"
|
|
icon={Icon.Close}
|
|
onClick={() => {
|
|
onChange("");
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|