import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { useAccountStore } from "@/contexts/AccountContext"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { observer } from "mobx-react-lite"; import { useState } from "react"; export const Route = createFileRoute("/auth/username")({ component: () => , }); const RouteComponent = observer(() => { const [username, setUsername] = useState(""); const navigate = useNavigate(); const { setUserId } = useAccountStore(); const handleSubmit = () => { if (username.trim() === "") return; setUserId("ID"); navigate({ to: "/", viewTransition: { types: ["warp"] }, }); }; return (

Welcome to Cytonic!

Sign in

Create a username

{ e.preventDefault(); handleSubmit(); }} > setUsername(e.target.value)} />
); });