refactor: move styles into separate components

5 files changed, 88 insertions, 77 deletions

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7762636..f177a75 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,8 +1,12 @@
-export const Home = () => {
+import { Content } from '../components';
+
+const Home = () => {
 	return (
-		<header>
-			<a href="/signup">Sign Up</a>
-			<a href="/login">Log In</a>
-		</header>
+		<Content>
+			<p><a href="/play">Try Now</a></p>
+			<p><a href="/signup">Create Account</a></p>
+		</Content>
 	);
-};
\ No newline at end of file
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx
index 55b2109..7e83f98 100644
--- a/src/pages/LogIn.tsx
+++ b/src/pages/LogIn.tsx
@@ -1,9 +1,10 @@
 import { useContext } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
-import { Pb } from '../pb.ts';
+import { Pb } from '../context.ts';
+import { TextInput, ArrowButton, FormLabel, Content, Form } from '../components';
 
-export const LogIn = () => {
+const LogIn = () => {
 	const pb = useContext(Pb);
 
 	const email = useSignal('');
@@ -18,23 +19,25 @@ export const LogIn = () => {
 	};
 
 	return (
-		<main>
-		<form onSubmit={onSubmit}>
-			<h1>Log In</h1>
-			<p>
-				Don't have an account? <a href="/signup">Sign up</a>
-			</p>
-			<hr />
-			<label>
-				Email
-				<input type="text" placeholder="Email" value={email} onInput={e => email.value = e.target.value} />
-			</label>
-			<label>
-				Password
-				<input type="password" placeholder="Password" value={password} onInput={e => password.value = e.target.value} />
-			</label>
-			<input type="submit" value="Continue" />
-		</form>
-		</main>
+		<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>
 	);
-};
\ No newline at end of file
+};
+
+export default LogIn;
\ No newline at end of file
diff --git a/src/pages/ProjectsList.tsx b/src/pages/ProjectsList.tsx
index 820c457..d548aa7 100644
--- a/src/pages/ProjectsList.tsx
+++ b/src/pages/ProjectsList.tsx
@@ -1,9 +1,10 @@
 import { useContext, useEffect } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
-import { Pb } from '../pb.ts';
+import { Pb } from '../context.ts';
+import { TextInput, Button, Form, FormLabel, ContainedList, Content } from '../components';
 
-export const ProjectsList = ({ user }) => {
+const ProjectsList = ({ user }) => {
 	console.log(user);
 	const pb = useContext(Pb);
 	const projects = useSignal(null);
@@ -30,22 +31,22 @@ export const ProjectsList = ({ user }) => {
 		);
 	}
 	return (
-		<main class="container">
+		<Content>
 			<h1>{user}'s Projects</h1>
-			<form onSubmit={onCreateProject}>
-				<fieldset class="group">
-					<label>
-						Name
-						<input type="text" placeholder="Project name" value={projectName} onInput={e => projectName.value = e.target.value} />
-					</label>
-					<input type="submit" value="Create project" />
-				</fieldset>
-			</form>
-			<ul class="contained">
+			<Form onSubmit={onCreateProject}>
+				<FormLabel>
+					Name
+					<TextInput placeholder="Project name" signal={projectName} />
+				</FormLabel>
+				<Button>Create project</Button>
+			</Form>
+			<ContainedList>
 				{projects.value.items.map(p => (
-					<li><a class="action" href={`/${user}/${p.name}`}>{p.name}</a></li>
+					<li><Button kind="ghost" href={`/${user}/${p.name}`}>{p.name}</Button></li>
 				))}
-			</ul>
-		</main>
+			</ContainedList>
+		</Content>
 	);
-};
\ No newline at end of file
+};
+
+export default ProjectsList;
\ No newline at end of file
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index b707b7d..8bdf35b 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -1,9 +1,10 @@
 import { useContext } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
-import { Pb } from '../pb.ts';
+import { Pb } from '../context.ts';
+import { TextInput, ArrowButton, Form, FormLabel, Content } from '../components';
 
-export const SignUp = () => {
+const SignUp = () => {
 	const pb = useContext(Pb);
 
 	const username = useSignal('');
@@ -26,31 +27,33 @@ export const SignUp = () => {
 	};
 
 	return (
-		<main>
-				<form onSubmit={onSubmit}>
-					<h1>Sign Up</h1>
-					<p>
-						Already have an account? <a href="/login">Log in</a>
-					</p>
-					<hr />
-					<label>
-						Username
-						<input type="text" placeholder="Username" value={username} onInput={e => username.value = e.target.value} />
-					</label>
-					<label>
-						Email
-						<input type="text" placeholder="Email" value={email} onInput={e => email.value = e.target.value} />
-					</label>
-					<label>
-						Password
-						<input type="password" placeholder="Password" value={password} onInput={e => password.value = e.target.value} />
-					</label>
-					<label>
-						Confirm password
-						<input type="password" placeholder="Confirm password" value={confirm} onInput={e => confirm.value = e.target.value} />
-					</label>
-					<input type="submit" value="Continue" />
-				</form>
-		</main>
+		<Content>
+			<Form onSubmit={onSubmit}>
+				<h1>Sign Up</h1>
+				<p>
+					Already have an account? <a href="/login">Log in</a>
+				</p>
+				<hr />
+				<FormLabel>
+					Username
+					<TextInput placeholder="Username" signal={username} />
+				</FormLabel>
+				<FormLabel>
+					Email
+					<TextInput placeholder="Email" signal={email} />
+				</FormLabel>
+				<FormLabel>
+					Password
+					<TextInput type="password" placeholder="Password" signal={password} />
+				</FormLabel>
+				<FormLabel>
+					Confirm password
+					<TextInput type="password" placeholder="Confirm password" signal={confirm} />
+				</FormLabel>
+				<ArrowButton>Continue</ArrowButton>
+			</Form>
+		</Content>
 	);
-};
\ No newline at end of file
+};
+
+export default SignUp;
\ No newline at end of file
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 8b28ea6..bd162cf 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1,4 +1,4 @@
-export { Home } from './Home.tsx';
-export { SignUp } from './SignUp.tsx';
-export { LogIn } from './LogIn.tsx';
-export { ProjectsList } from './ProjectsList.tsx';
\ No newline at end of file
+export { default as Home } from './Home.tsx';
+export { default as SignUp } from './SignUp.tsx';
+export { default as LogIn } from './LogIn.tsx';
+export { default as ProjectsList } from './ProjectsList.tsx';
\ No newline at end of file