markone/packages/web/src/app/index.tsx

import { DEMO_USER } from "@markone/core/user"
import { createFileRoute, useNavigate } from "@tanstack/react-router"
import { useLogin } from "~/auth"
import { Link } from "~/components/link"

function Index() {
	return (
		<main className="p-48 flex flex-row items-start justify-center space-x-24">
			<div className="flex flex-col items-start">
				<h1 className="text-2xl">
					<span className="font-bold">MARKONE</span>
					<br />
				</h1>
				<p className="pb-4 text-2xl uppercase">BOOKMARK MANAGER</p>
				<div className="flex flex-col text-lg">
					<Link href="/login">LOGIN</Link>
					<Link href="/signup">SIGN UP</Link>
					<DemoButton />
				</div>
			</div>
			<div className="container max-w-2xl">
				<p>
					<strong>WHAT IS MARKONE?</strong>
					<br />
					MARKONE is a local-first, self-hostable bookmark manager.
				</p>
				<ul className="px-2 pt-2">
					<li>* Curate interesting websites you find online, and let MARKONE archive them.</li>
					<li>* Reference your saved bookmarks anytime, even when offline.</li>
					<li>* Share your collections to others with a permalink.</li>
				</ul>
				<br />
				<p>
					<strong>WHERE IS MARKONE?</strong>
					<br />
					MARKONE is available as a web app and a browser extension for now.
				</p>
				<br />
				<p>
					<strong>TECHNICAL STUFF</strong>
					<br />
					Source code, as well as hosting guide for MARKONE is <Link href="https://github.com/">available here</Link>.
					<br />
				</p>
			</div>
		</main>
	)
}

function DemoButton() {
	const loginMutation = useLogin()
	const navigate = useNavigate()

	async function startDemo() {
		try {
			const res = await loginMutation.mutateAsync({
				username: DEMO_USER.username,
				password: DEMO_USER.unhashedPassword,
			})
			if (res.status === 200) {
				navigate({ to: "/bookmarks" })
			}
		} catch {}
	}

	return (
		<button
			type="button"
			onClick={startDemo}
			className="underline active:bg-stone-700 dark:active:bg-stone-200 dark:active:text-stone-800 active:text-stone-200 text-left"
		>
			DEMO
		</button>
	)
}

export const Route = createFileRoute("/")({
	component: Index,
})