registration form

src/components/UI/Input.tsx

@@ -14,8 +14,16 @@ interface InputProps {
 const Input: FC<InputProps> = ({label, type, placeholder, name, disabled, onChange, value}) => {
   return <>
     <div className="mb-2">
-      <label htmlFor={label} className={"block"}>{label}:</label>
+      <label htmlFor={label} className={"block"}>
-      <input className={"block w-full border border-gray-500 rounded-lg p-2 lg:w-full"} type={type} placeholder={placeholder} name={name} disabled={disabled} onChange={onChange} value={value}/>
+        {label}:
+      </label>
+      <input className={"block w-full border border-gray-500 rounded-lg p-2 lg:w-full text-black"}
+             type={type}
+             placeholder={placeholder}
+             name={name}
+             disabled={disabled}
+             onChange={onChange}
+             value={value}/>
     </div>
 
 

src/routes/LoginPage.tsx

@@ -1,8 +1,11 @@
 import Input from "../components/UI/Input.tsx";
 import Button from "../components/UI/Button.tsx";
+import {useState} from "react";
 
 
 export function LoginPage() {
+  const [login,setLogin] = useState('');
+  const [password, setPassword] = useState('');
   return <>
     <div className={"flex flex-col items-center mb-4 pt-4"}>
       <div className={"lg:w-80 sm:w-3/4"}>
@@ -17,19 +20,18 @@ export function LoginPage() {
         <Input type="text"
                label="Login"
                placeholder="Enter your login"
-               value={""}
+               value={login}
                name={"login"}
-               onChange={() => {
+               onChange={(e) => setLogin(e.target.value) }
-               }}
                error={false} />
 
         <Input type={"password"}
                label={"Password"}
-               value={""}
+               value={password}
                placeholder={"Enter your password"}
                error={false}
                name={"password"}
-               onChange={()=>{}} />
+               onChange={(e)=>setPassword(e.target.value) } />
         <Button className={"w-full mt-8"} onClick={() => {}}>Login</Button>
         <p className={"text-center"}>- or -</p>
         <Button className={"w-full bg-gray-500"} onClick={() => {}}>Create account</Button>