Beta3

components/input.tsx

@@ -6,14 +6,15 @@ type Props = {
 	placeholder?: string;
 	label: string;
 	classoverride?: string;
+	textarea?: boolean | false
 	id?: string;
 	type?: string | "text";
 };
 
 const Input = React.forwardRef<
-	HTMLInputElement,
+	HTMLInputElement | HTMLTextAreaElement,
 	Props & ReturnType<UseFormRegister<any>>
->(({ placeholder, label, classoverride, id, onChange, onBlur, name, type }, ref) => {
+>(({ placeholder, label, classoverride, id, onChange, onBlur, name, type, textarea }, ref) => {
 	const { formState: { errors } } = useFormContext();
 	return (
 		<div className="mb-3">
@@ -22,18 +23,28 @@ const Input = React.forwardRef<
 					{label}
 				</label>
 			}
-			<input
+			{!textarea ? <input
 				id={id}
 				placeholder={placeholder}
 				type={type}
 				onChange={onChange}
 				onBlur={onBlur}
 				name={name}
-				ref={ref}
+				ref={(ref as any)}
 				className={
 					"text-gray-600 dark:text-white rounded-lg p-2 border-2 border-gray-300  dark:border-gray-500 w-full bg-gray-50 focus-visible:outline-none dark:bg-gray-700 " + classoverride + `${errors[name] ? " focus-visible:ring-red-500 focus-visible:border-red-500" : "focus-visible:ring-blue-500 focus-visible:border-blue-500"}`
 				}
-			/>
+			/> : <textarea
+				id={id}
+				placeholder={placeholder}
+				onChange={onChange}
+				onBlur={onBlur}
+				name={name}
+				ref={(ref as any)}
+				className={
+					"text-gray-600 dark:text-white rounded-lg p-2 border-2 border-gray-300  dark:border-gray-500 w-full bg-gray-50 focus-visible:outline-none dark:bg-gray-700 " + classoverride + `${errors[name] ? " focus-visible:ring-red-500 focus-visible:border-red-500" : "focus-visible:ring-blue-500 focus-visible:border-blue-500"}`
+				}
+			/>}
 			{errors[name] && (
 				<p className="text-red-500 block h-10 -mb-7 mt-1">{(errors[name]?.message as string)}</p>
 			)}

components/sidebar.tsx

@@ -130,7 +130,7 @@ const Topbar: NextPage = () => {
 									<a
 										className={`${active ? "bg-tovybg text-white" : "text-gray-700 dark:text-white"
 											}  px-3 py-2 text-sm rounded-md m-1 mb-0 font-medium flex flex-row cursor-pointer`}
-										onClick={logout}
+										onClick={() => logout()}
 									>
 										<IconLogout size={22} className="inline-block" />
 										<p className="ml-2"> Logout </p>