69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import React, {Dispatch, SetStateAction, useState} from "react";
|
|
|
|
export default function TextInputField(
|
|
{
|
|
label,
|
|
inputValue,
|
|
inputType,
|
|
setInputValue,
|
|
inputId,
|
|
isRequired = false,
|
|
hintMessage,
|
|
isDisabled = false,
|
|
icon
|
|
}:{
|
|
label: string,
|
|
inputValue: string,
|
|
inputType: "text" | "password" | "email" | "url" | "date" | "number",
|
|
setInputValue: Dispatch<SetStateAction<string>>,
|
|
inputId: string,
|
|
isRequired?: boolean,
|
|
hintMessage?: string,
|
|
isDisabled?: boolean,
|
|
icon?: IconDefinition,
|
|
}
|
|
){
|
|
|
|
const [hintShown, setHintShown] = useState<boolean>(false);
|
|
|
|
function showHint(){
|
|
if (hintMessage){
|
|
setHintShown(true);
|
|
}
|
|
}
|
|
function hideHint(){
|
|
if (hintShown){
|
|
setHintShown(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div
|
|
className={'flex justify-start items-center gap-2 px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none w-full hover:bg-secondary hover:border-secondary focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 focus-within:bg-secondary transition-all duration-200'}>
|
|
{
|
|
icon && <FontAwesomeIcon icon={icon} className={'text-primary w-4 h-4'}/>
|
|
}
|
|
<input
|
|
type={inputType}
|
|
id={inputId}
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
required={isRequired}
|
|
placeholder={`${label}${isRequired ? ' *' : ''}`}
|
|
onFocus={showHint}
|
|
onBlur={hideHint}
|
|
className={'w-full bg-transparent text-text-primary border-none outline-none placeholder:text-muted/60 disabled:opacity-50 disabled:cursor-not-allowed'}
|
|
disabled={isDisabled}
|
|
/>
|
|
</div>
|
|
{
|
|
hintShown && hintMessage &&
|
|
<small className="text-muted text-xs mt-1 ml-1 block">{hintMessage}</small>
|
|
}
|
|
</div>
|
|
)
|
|
}
|