48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { projNameHighLimit, projNameLowLimit } from "../../Data/constants";
|
|
import { alphanumeric } from "../../Data/regex";
|
|
|
|
export default function ProjectNameInput(props: {
|
|
name: string;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}): JSX.Element {
|
|
const name = props.name;
|
|
return (
|
|
<>
|
|
<input
|
|
className={
|
|
name.length >= projNameLowLimit &&
|
|
name.length <= projNameHighLimit &&
|
|
alphanumeric.test(name)
|
|
? "border-2 border-green-500 dark:border-green-500 focus-visible:border-green-500 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
|
: "border-2 border-red-600 dark:border-red-600 focus:border-red-600 outline-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight"
|
|
}
|
|
spellCheck="false"
|
|
id="New name"
|
|
type="text"
|
|
placeholder="Project name"
|
|
value={name}
|
|
onChange={props.onChange}
|
|
/>
|
|
<div className="my-1">
|
|
{!alphanumeric.test(name) && name !== "" && (
|
|
<p className="text-red-600 pl-2 text-[13px] text-left">
|
|
No special characters allowed
|
|
</p>
|
|
)}
|
|
{(name.length < projNameLowLimit ||
|
|
name.length > projNameHighLimit) && (
|
|
<p className="text-red-600 pl-2 text-[13px] text-left">
|
|
Project name must be 10-99 characters
|
|
</p>
|
|
)}
|
|
{alphanumeric.test(props.name) &&
|
|
name.length >= projNameLowLimit &&
|
|
name.length <= projNameHighLimit && (
|
|
<p className="text-green-500 pl-2 text-[13px] text-left">
|
|
Valid project name!
|
|
</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|