| export default function AuthLayout({ mode, onSwitchMode, children }) { |
| const isForgot = mode === "forgot"; |
|
|
| return ( |
| <div className="auth-shell"> |
| <div className="auth-card"> |
| <div className="auth-header"> |
| <div className="brand-block"> |
| <div className="brand-mark">T</div> |
| <div> |
| <h1>TradeMind</h1> |
| <p> |
| {isForgot |
| ? "Password recovery" |
| : mode === "signin" |
| ? "Sign in to your account" |
| : "Create an account"} |
| </p> |
| </div> |
| </div> |
| |
| {/* Hide tab switcher on the forgot-password screen */} |
| {!isForgot && ( |
| <div className="auth-tabs" role="tablist" aria-label="Authentication mode"> |
| <button |
| type="button" |
| role="tab" |
| aria-selected={mode === "signin"} |
| className={`tab ${mode === "signin" ? "active" : ""}`} |
| onClick={() => onSwitchMode("signin")} |
| > |
| Sign In |
| </button> |
| <button |
| type="button" |
| role="tab" |
| aria-selected={mode === "signup"} |
| className={`tab ${mode === "signup" ? "active" : ""}`} |
| onClick={() => onSwitchMode("signup")} |
| > |
| Sign Up |
| </button> |
| </div> |
| )} |
| </div> |
| {children} |
| </div> |
| </div> |
| ); |
| } |
|
|
