51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
import Layout from "../components/layout";
|
|
import WantToButton from "../components/wanttobutton";
|
|
import Link from "next/link";
|
|
import { useFetchUser } from "../lib/user";
|
|
|
|
function Home() {
|
|
const { user, loading } = useFetchUser();
|
|
|
|
return (
|
|
<Layout user={user} loading={loading}>
|
|
{loading && <p>Loading login info...</p>}
|
|
|
|
{!loading && !user && (
|
|
<>
|
|
<div className="flex flex-col justify-center">
|
|
<p className="text-lg">I want to...</p>
|
|
<div className="flex flex-row mt-2">
|
|
<WantToButton href="/api/v1/login" text="login" />
|
|
<WantToButton
|
|
href="/api/v1/login"
|
|
text="stay anonymous"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{user && (
|
|
<>
|
|
<h4>Rendered user info on the client</h4>
|
|
<img src={user.picture} alt="user picture" />
|
|
<p>nickname: {user.nickname}</p>
|
|
<p>name: {user.name}</p>
|
|
<p>
|
|
<form method="POST" action="/api/v1/bookmarks">
|
|
<label for="title">title: </label>
|
|
<input type="text" name="title" />
|
|
<br />
|
|
<label for="url">url:</label>
|
|
<input type="text" name="url" />
|
|
<button type="submit">Add bookmark</button>
|
|
</form>
|
|
</p>
|
|
</>
|
|
)}
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default Home;
|