34 lines
1.0 KiB
React
34 lines
1.0 KiB
React
|
import React, { useState, useCallback } from 'react';
|
||
|
|
import LoginForm from './LoginForm';
|
||
|
|
import SignupForm from './SignupForm';
|
||
|
|
import OtpForm from './OtpForm';
|
||
|
|
|
||
|
|
const AuthPage = () => {
|
||
|
|
const [view, setView] = useState('login'); // 'login', 'signup', or 'otp'
|
||
|
|
|
||
|
|
const showSignup = useCallback(() => setView('signup'), []);
|
||
|
|
const showLogin = useCallback(() => setView('login'), []);
|
||
|
|
const showOtp = useCallback(() => setView('otp'), []);
|
||
|
|
|
||
|
|
const renderForm = () => {
|
||
|
|
switch (view) {
|
||
|
|
case 'signup':
|
||
|
|
return <SignupForm toggleForm={showLogin} onSuccess={showOtp} />;
|
||
|
|
case 'otp':
|
||
|
|
return <OtpForm />;
|
||
|
|
case 'login':
|
||
|
|
default:
|
||
|
|
return <LoginForm toggleForm={showSignup} onSuccess={showLogin} />;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex items-center justify-center p-4">
|
||
|
|
<div className="w-full max-w-md p-8 space-y-6 bg-black/30 backdrop-blur-xl rounded-2xl shadow-2xl">
|
||
|
|
{renderForm()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AuthPage;
|