45 lines
1.7 KiB
React
45 lines
1.7 KiB
React
// 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 ? "750px" : "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 - csak desktop */}
|
|
<div
|
|
className={`hidden md:flex transition-all duration-500 ${
|
|
isRegistering ? "w-0 p-0" : "w-2/5 p-8"
|
|
} 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="hidden md:block text-lg mt-0 text-center font-light 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>
|
|
)
|
|
}
|