73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { MusicalNoteIcon } from "@heroicons/react/24/outline";
|
|
import LoginForm from "../components/auth/LoginForm";
|
|
import RegisterForm from "../components/auth/RegisterForm";
|
|
|
|
export default function AuthPage() {
|
|
const [activeTab, setActiveTab] = useState<"login" | "register">("login");
|
|
|
|
const handleLoginSuccess = () => {
|
|
// Navigation will be handled by App.tsx checking auth state
|
|
};
|
|
|
|
const handleRegisterSuccess = () => {
|
|
setActiveTab("login");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="w-full max-w-md"
|
|
>
|
|
<div className="bg-gray-900/80 backdrop-blur-xl rounded-2xl shadow-2xl p-8 border border-gray-800">
|
|
<div className="text-center mb-8">
|
|
<motion.div
|
|
initial={{ rotate: 0 }}
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
|
className="inline-block"
|
|
>
|
|
<MusicalNoteIcon className="h-16 w-16 text-primary-500 mx-auto mb-4" />
|
|
</motion.div>
|
|
<h1 className="text-4xl font-bold text-white mb-2">PolyPhonia</h1>
|
|
<p className="text-gray-400">Mix Tones, Create Magic</p>
|
|
</div>
|
|
|
|
<div className="flex mb-6 bg-gray-800 rounded-lg p-1">
|
|
<button
|
|
onClick={() => setActiveTab("login")}
|
|
className={`flex-1 py-2 px-4 rounded-md font-medium transition-all ${
|
|
activeTab === "login"
|
|
? "bg-primary-600 text-white shadow-lg"
|
|
: "text-gray-400 hover:text-white"
|
|
}`}
|
|
>
|
|
Login
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab("register")}
|
|
className={`flex-1 py-2 px-4 rounded-md font-medium transition-all ${
|
|
activeTab === "register"
|
|
? "bg-green-600 text-white shadow-lg"
|
|
: "text-gray-400 hover:text-white"
|
|
}`}
|
|
>
|
|
Register
|
|
</button>
|
|
</div>
|
|
|
|
{activeTab === "login" ? (
|
|
<LoginForm onSuccess={handleLoginSuccess} />
|
|
) : (
|
|
<RegisterForm onSuccess={handleRegisterSuccess} />
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|