implement sign up page

packages/web/src/app/bookmarks.tsx

@@ -1,5 +1,5 @@
 import type { LinkBookmark } from "@markone/core/bookmark"
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import clsx from "clsx"
 import { useEffect, useId, useState } from "react"
 import { create } from "zustand"
@@ -11,6 +11,7 @@ import { Message, MessageVariant } from "~/components/message"
 import { FormField } from "~/components/form-field"
 import { LoadingSpinner } from "~/components/loading-spinner"
 import { useMnemonics } from "~/hooks/use-mnemonics"
+import { useLogOut } from "~/auth"
 
 const LAYOUT_MODE = {
 	popup: "popup",
@@ -593,10 +594,27 @@ function ActionBar() {
 			<Button>
 				<span className="underline">S</span>EARCH
 			</Button>
+			<LogOutButton />
 		</div>
 	)
 }
 
+function LogOutButton() {
+	const logOutMutation = useLogOut()
+	const navigate = useNavigate()
+
+	function logOut() {
+		logOutMutation.mutate()
+		navigate({ to: "/", replace: true })
+	}
+
+	return (
+		<Button disabled={logOutMutation.isPending} onClick={logOut}>
+			LOG OUT
+		</Button>
+	)
+}
+
 export const Route = createFileRoute("/bookmarks")({
 	component: Page,
 })