import React from 'react' import { Page } from 'web/components/page' import { UserPage } from 'web/components/user-page' import { useUser } from 'web/hooks/use-user' import { firebaseLogin } from 'web/lib/firebase/users' function SignInCard() { return ( <div className="card glass sm:card-side text-neutral-content mx-4 my-12 max-w-sm bg-green-600 shadow-xl transition-all hover:bg-green-600 hover:shadow-xl sm:mx-auto"> <div className="p-4"> <img src="/logo-bg-white.png" className="h-20 w-20 rounded-lg shadow-lg" /> </div> <div className="card-body max-w-md"> <h2 className="card-title font-major-mono">Welcome!</h2> <p>Sign in to get started</p> <div className="card-actions"> <button className="btn glass rounded-full hover:bg-green-500" onClick={firebaseLogin} > Sign in with Google </button> </div> </div> </div> ) } export default function Account() { const user = useUser() return user ? ( <UserPage user={user} currentUser={user} /> ) : ( <Page> <SignInCard /> </Page> ) }