import {
	TiForm,
	TiText,
	TiMail,
	TiPassword,
	TiButton,
} from '@k8pai/tailwind-inputs';
 
const MyComponent = () => {
	const handleSubmit = (values) => {
		console.log(values);
	};
 
	return (
		<TiForm className="w-full bg-transparent" onSubmit={handleSubmit}>
			<TiText
				name={'username'}
				label={'Username'}
				placeholder={'Enter Your Username'}
				mandatory
				style={{
					label: 'text-white font-semibold tracking-wide ml-3',
					size: 'max-w-full',
				}}
				validate={'username'}
				error="This is not a valid username!"
				className={'space-y-2'}
			/>
			<TiMail
				name={'mail'}
				label={'E Mail'}
				mandatory
				style={{
					label: 'text-white font-semibold tracking-wide ml-3',
				}}
				error="This is not a valid Mail!"
				className={'space-y-2'}
			/>
			<TiPassword
				name={'password'}
				label={'Password'}
				mandatory
				style={{
					label: 'text-white font-semibold tracking-wide ml-3',
				}}
				error="This is not a valid Password!"
				className={'space-y-2'}
			/>
			<TiButton
				type={'submit'}
				title={'Submit'}
				className={
					'px-3 py-2 mt-2 rounded-lg text-white bg-green-500/90 '
				}
			/>
		</TiForm>
	);
};
 
export default MyComponent;