54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { type Component, type JSXElement } from "solid-js";
|
|
import { IInputProps } from "./types";
|
|
|
|
const Input: Component<IInputProps> = (props: IInputProps) => {
|
|
const handleEnter = (e: KeyboardEvent) => {
|
|
if (e.key === "Enter") {
|
|
props.onSubmit?.();
|
|
}
|
|
};
|
|
|
|
const submitHtml = (): JSXElement => (
|
|
<button
|
|
class={`bg-stone-950 btn btn-neutral h-full ${props.rounded ? "rounded-full" : "rounded-xl"}`}
|
|
onClick={props.onSubmit}
|
|
>
|
|
{props.submitText}
|
|
</button>
|
|
);
|
|
|
|
const inputHtml = (): JSXElement => (
|
|
<input
|
|
type={props.type ? props.type : "text"}
|
|
placeholder={props.placeholder}
|
|
value={props.value}
|
|
onInput={(e) => props.onChange?.(e.currentTarget.value)}
|
|
onKeyDown={handleEnter}
|
|
/>
|
|
);
|
|
|
|
const textAreaHtml = (): JSXElement => (
|
|
<textarea
|
|
class="w-full h-full outline-none hover:outline-none px-5 py-3 resize-none"
|
|
placeholder={props.placeholder}
|
|
value={props.value}
|
|
onInput={(e) => props.onChange?.(e.currentTarget.value)}
|
|
onKeyDown={handleEnter}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div
|
|
class={`bg-stone-800 ${props.textArea ? "h-32" : "h-16"} p-2 flex flex-row gap-2 ${props.rounded ? "rounded-full" : "rounded-2xl"} ${props.outline ? "outline-2" : ""}`}
|
|
>
|
|
<label
|
|
class={`bg-stone-800 input ${props.textArea ? "px-0" : "px-5"} w-full h-full focus:border-none outline-none ${props.rounded ? "rounded-full" : "rounded-xl"}`}
|
|
>
|
|
{props.textArea ? textAreaHtml() : inputHtml()}
|
|
</label>
|
|
{props.submitText ? submitHtml() : undefined}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { Input };
|