I’m just learning laravel & react js.
I tried to make project laravel + react js. I want to ask how to export component TextInput (className) to my Login page.
TextInput.jsx script :
import { forwardRef, useEffect, useRef } from "react";
export default forwardRef(function TextInput(
{ type = "text", className, isFocused = false, ...props },
ref
) {
const input = ref ? ref : useRef();
useEffect(() => {
if (isFocused) {
input.current.focus();
}
}, []);
return (
<input
{...props}
type={type}
className={
"rounded-2xl bg-form-bg py-[13px] px-7 w-full focus:outline-alerange focus:outline-none"
}
ref={input}
/>
);
});
Login.jsx script :
import React from "react";
import TextInput from "@/Components/TextInput";
export default function Login() {
return (
<div className="mx-auto max-w-screen min-h-screen bg-black text-white md:px-10 px-3">
<div className="fixed top-[-50px] hidden lg:block">
<img
src="/images/signup-image.png"
className="hidden laptopLg:block laptopLg:max-w-[450px] laptopXl:max-w-[640px]"
alt=""
/>
</div>
<div className="py-24 flex laptopLg:ml-[680px] laptopXl:ml-[870px]">
<div>
<img src="/images/moonton-white.svg" alt="" />
<div className="my-[70px]">
<div className="font-semibold text-[26px] mb-3">
Welcome Back
</div>
<p className="text-base text-[#767676] leading-7">
Explore our new movies and get <br />
the better insight for your life
</p>
</div>
<form className="w-[370px]">
<div className="flex flex-col gap-6">
<div>
<label className="text-base block mb-2">
Email Address
</label>
<input
type="email"
name="email"
placeholder="Email Address"
/>
</div>
<div>
<label className="text-base block mb-2">
Password
</label>
<input
type="password"
name="password"
placeholder="Password"
/>
</div>
</div>
<div className="grid space-y-[14px] mt-[30px]">
<a
href="/"
className="rounded-2xl bg-alerange py-[13px] text-center"
>
<span className="text-base font-semibold">
Start Watching
</span>
</a>
<a
href="sign_up.html"
className="rounded-2xl border border-white py-[13px] text-center"
>
<span className="text-base text-white">
Create New Account
</span>
</a>
</div>
</form>
</div>
</div>
</div>
);
}
i want to replace className (email & password) from component/TextInput.jsx to pages/Login.jsx.
On this project i using laravel 10