74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { ToggleButton } from "../Layout/Button";
|
|
import { LogIn as LogInIcon, User as UserIcon } from "lucide-react";
|
|
import LoginForm from "./LoginForm";
|
|
import RegisterForm from "./RegisterForm";
|
|
import "../../assets/styles/auth.css";
|
|
|
|
|
|
interface AuthModalProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
|
|
const [selectedTab, setSelectedTab] = useState<string>("Login");
|
|
const [spinDuration, setSpinDuration] = useState("7s")
|
|
|
|
const handleSubmit = () => {
|
|
setSpinDuration("1s");
|
|
|
|
setTimeout(() => {
|
|
setSpinDuration("7s");
|
|
}, 3500);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/*Background Blur*/}
|
|
<div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
|
|
{/*Container*/}
|
|
<div
|
|
className="container fixed inset-0 flex flex-col items-center justify-around z-50
|
|
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
|
|
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
|
|
>
|
|
|
|
{/*Border Container*/}
|
|
<div
|
|
id="border-container"
|
|
className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
|
|
z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
|
|
>
|
|
<div id="login-methods" className=" w-full flex flex-row items-center justify-evenly">
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
|
|
>
|
|
✕
|
|
</button>
|
|
<ToggleButton
|
|
toggled={selectedTab === "Login"}
|
|
extraClasses="flex flex-col items-center px-8"
|
|
onClick={() => setSelectedTab("Login")}
|
|
>
|
|
<LogInIcon className="h-[40px] w-[40px] mr-1" />
|
|
Login
|
|
</ToggleButton>
|
|
<ToggleButton
|
|
toggled={selectedTab === "Register"}
|
|
extraClasses="flex flex-col items-center px-8"
|
|
onClick={() => setSelectedTab("Register")}
|
|
>
|
|
<UserIcon className="h-[40px] w-[40px] mr-1" />
|
|
Register
|
|
</ToggleButton>
|
|
</div>
|
|
{selectedTab === "Login" ? <LoginForm onSubmit={handleSubmit} /> : <RegisterForm onSubmit={handleSubmit}/>}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AuthModal;
|