128 lines
4.0 KiB
TypeScript
128 lines
4.0 KiB
TypeScript
import { signIn, signOut, useSession } from "next-auth/react";
|
|
import WavingHand from "~/components/animations/WavingHand";
|
|
import AnimatedWord from "~/components/animations/AnimatedWord";
|
|
import { motion } from "framer-motion";
|
|
import { useRouter } from "next/router";
|
|
import Head from "next/head";
|
|
import Link from "next/link";
|
|
|
|
import { api } from "~/utils/api";
|
|
|
|
import Layout from "~/components/global/Layout";
|
|
|
|
export default function Home() {
|
|
const { data: sessionData } = useSession();
|
|
|
|
const router = useRouter();
|
|
|
|
const container = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { delay: 0.5 },
|
|
},
|
|
};
|
|
|
|
const goToSignup = () => {
|
|
router.push("/Signup")
|
|
.catch((err) => console.log(`Failed to navigate to signup page with error: ${err}`));
|
|
}
|
|
|
|
const goToLogin = () => {
|
|
router.push("/Login")
|
|
.catch((err) => console.log(`Failed to navigate to login page with error: ${err}`));
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Layout>
|
|
<div className="home-container flex justify-center items-center h-full ">
|
|
{sessionData ? (
|
|
<div className="signed-in"></div>
|
|
) : (
|
|
<div className="not-signed-in flex flex-col items-center justify-center -mt-14">
|
|
<div className="welcome-message flex">
|
|
<WavingHand />
|
|
<AnimatedWord
|
|
text="Welcome!"
|
|
textClassName="text-7xl font-thin"
|
|
className="ml-5 flex overflow-hidden"
|
|
/>
|
|
</div>
|
|
<motion.div
|
|
variants={container}
|
|
initial="hidden"
|
|
animate="visible"
|
|
className="summary"
|
|
>
|
|
<span className="ml-5 text-2xl">
|
|
FinVis is a investment tracker and learning tool for
|
|
individuals
|
|
</span>
|
|
</motion.div>
|
|
<motion.div
|
|
variants={container}
|
|
initial="hidden"
|
|
animate="visible"
|
|
className="login-signup flex flex-col items-center justify-center mt-20"
|
|
>
|
|
<motion.button
|
|
className="signup-button w-60 rounded-lg bg-initial-home-buttons pb-3 pl-4 pr-4 pt-3 text-xl
|
|
font-bold text-gray-700"
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
onClick={goToSignup}
|
|
>
|
|
Register
|
|
</motion.button>
|
|
<h2 className="mt-8 mb-5 underline">Have an account?</h2>
|
|
<motion.button
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
onClick={goToLogin}
|
|
className="login-button w-60 rounded-lg bg-initial-home-buttons pb-3 pl-4 pr-4 pt-3 text-xl
|
|
font-bold text-gray-700"
|
|
>
|
|
Login
|
|
</motion.button>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Commenting out as this is just for the default example router
|
|
/*
|
|
const AuthShowcase = () => {
|
|
const { data: sessionData } = useSession();
|
|
|
|
const { data: secretMessage } = api.example.getSecretMessage.useQuery(
|
|
// no input
|
|
// eslint-disable-next-line no-undefined
|
|
undefined,
|
|
// eslint-disable-next-line no-undefined
|
|
{ enabled: sessionData?.user !== undefined },
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-4">
|
|
<p className="text-center text-2xl text-white">
|
|
{sessionData && <span>Logged in as {sessionData.user?.name}</span>}
|
|
{secretMessage && <span> - {secretMessage}</span>}
|
|
</p>
|
|
<button
|
|
className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline
|
|
transition hover:bg-white/20"
|
|
// eslint-disable-next-line no-void
|
|
onClick={sessionData ? () => void signOut() : () => void signIn()}
|
|
>
|
|
{sessionData ? "Sign out" : "Sign in"}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
*/
|