feat: use different header actions for each page

1 files changed, 27 insertions, 21 deletions

diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx
index 7e83f98..1f6cb70 100644
--- a/src/pages/LogIn.tsx
+++ b/src/pages/LogIn.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
 import { Pb } from '../context.ts';
-import { TextInput, ArrowButton, FormLabel, Content, Form } from '../components';
+import { Header, Content, Form, TextInput, Button, ArrowButton, FormLabel } from '../components';
 
 const LogIn = () => {
 	const pb = useContext(Pb);
@@ -12,31 +12,37 @@ const LogIn = () => {
 
 	const onSubmit = async (event: SubmitEvent) => {
 		event.preventDefault();
-		const user = await pb.collection('users').authWithPassword(email.value, password.value);
+		await pb.collection('users').authWithPassword(email.value, password.value);
 		if (pb.authStore.isValid) {
-			route('/' + user.username);
+			route('/' + pb.authStore.model.username);
 		}
 	};
 
 	return (
-		<Content>
-			<Form onSubmit={onSubmit}>
-				<h1>Log In</h1>
-				<p>
-					Don't have an account? <a href="/signup">Sign up</a>
-				</p>
-				<hr />
-				<FormLabel>
-					Email
-					<TextInput placeholder="Email" signal={email} />
-				</FormLabel>
-				<FormLabel>
-					Password
-					<TextInput type="password" placeholder="Email" signal={email} />
-				</FormLabel>
-				<ArrowButton>Continue</ArrowButton>
-			</Form>
-		</Content>
+		<>
+			<Header>
+				<Button kind="ghost" href="/play">Try Now</Button>
+				<Button kind="ghost" href="/signup">Sign Up</Button>
+			</Header>
+			<Content>
+				<Form onSubmit={onSubmit}>
+					<h1>Log In</h1>
+					<p>
+						Don't have an account? <a href="/signup">Sign up</a>
+					</p>
+					<hr />
+					<FormLabel>
+						Email
+						<TextInput placeholder="Email" signal={email} />
+					</FormLabel>
+					<FormLabel>
+						Password
+						<TextInput type="password" placeholder="Password" signal={password} />
+					</FormLabel>
+					<ArrowButton>Continue</ArrowButton>
+				</Form>
+			</Content>
+		</>
 	);
 };