Authorization working

src/components/input/TextInput.tsx

@@ -0,0 +1,64 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+
+
+
+interface TextInputProps extends ComponentProps<"input">{
+	id: string;
+	inputClasses?: string;
+	labelClasses?: string;
+	accepted?: boolean;
+}
+
+
+export default function TextInput(props: TextInputProps){
+	const { id, placeholder, name, inputClasses, labelClasses, accepted } = props;
+
+
+	return (
+		<div
+			className="flex flex-row justify-center w-full rounded-sm bg-inherit"
+		>
+			<div
+				className="relative bg-inherit w-full"
+			>
+				<input
+					{...props}
+					type="text"
+					className={clsx(
+						"peer bg-transparent w-full min-w-72 px-2 py-1 rounded-lg",
+						"ring-2 focus:ring-sky-600 placeholder-transparent outline-hidden",
+						inputClasses,
+						{
+							"ring-gray-500": accepted === undefined,
+							"ring-red-600": accepted === false,
+							"ring-green-600": accepted === true
+						}
+					)}
+					name={name}
+				/>
+				<label
+					htmlFor={id}
+					id={`${id}Label`}
+					className={clsx(
+						"absolute cursor-text left-0 -top-3 mx-1 px-1",
+						"bg-white dark:bg-neutral-825 text-sm",
+						"peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-1 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm",
+						labelClasses,
+						{
+							"text-gray-500": accepted === undefined,
+							"text-red-600": accepted === false,
+							"text-green-600": accepted === true
+						}
+					)}
+					style={{transitionProperty: "top, font-size, line-height",
+						transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+						transitionDuration: "150ms"
+					}}
+				>
+					{placeholder}
+				</label>
+			</div>
+		</div>
+	);
+}