47 lines
1.8 KiB
React
Executable File
47 lines
1.8 KiB
React
Executable File
// src/pages/Auth/AuthLogin.jsx
|
|
// Kártya amelyiken a bejelentkezés és regisztráció van
|
|
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import Animation from "../../assets/SerpentRace_Animation/SerpentRace_Animation";
|
|
import LoginForm from "./LoginForm";
|
|
import RegisterForm from "./RegisterForm";
|
|
import Logo from "../../assets/pictures/Logo";
|
|
|
|
export default function AuthCard({ isRegistering, setIsRegistering }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ height: "auto" }}
|
|
animate={{ height: isRegistering ? "600px" : "385px" }}
|
|
transition={{ duration: 0.5, ease: "easeInOut" }}
|
|
className="absolute flex max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden"
|
|
>
|
|
{/* Bal oldali kép és szöveg */}
|
|
<div
|
|
className={`transition-all duration-500 ${isRegistering ? 'w-0 p-0' : 'w-2/5 p-8'} flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
|
|
>
|
|
<Logo size={100}/>
|
|
<div className="h-6" />
|
|
<Animation sizePercentage={30} />
|
|
<p className="text-lg mt-0 text-center font-light whitespace-nowrap overflow-hidden">
|
|
Lépj be és légy a legjobb!
|
|
</p>
|
|
</div>
|
|
|
|
{/* Jobb oldali űrlap */}
|
|
<div className="w-full p-10 relative">
|
|
<AnimatePresence mode="wait">
|
|
{isRegistering ? <RegisterForm /> : <LoginForm />}
|
|
</AnimatePresence>
|
|
<span
|
|
className="text-secondary cursor-pointer hover:underline mt-4 block text-center"
|
|
onClick={() => setIsRegistering(!isRegistering)}
|
|
>
|
|
{isRegistering
|
|
? "Már van fiókod? Jelentkezz be itt!"
|
|
: "Nincs még fiókod? Regisztrálj itt!"}
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|