From 13451b7588aa5800f0c1a87e7c3b49830d9e4087 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Wed, 13 Mar 2024 17:45:11 +0000
Subject: refactor: add title prop to Header

---
 src/components/Header.css  |  3 +--
 src/components/Header.tsx  | 10 +++++-----
 src/pages/Home.tsx         |  2 +-
 src/pages/LogIn.tsx        |  2 +-
 src/pages/ProjectsList.tsx |  2 +-
 src/pages/SignUp.tsx       |  2 +-
 6 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/Header.css b/src/components/Header.css
index ef1dd60..0a562bf 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -3,9 +3,9 @@
 		height: 3rem;
 		border-bottom: 1px solid var(--overlay);
 		display: flex;
-		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
+		--button-height: 100%;
 
 		> .title {
 			font-weight: 500;
@@ -15,7 +15,6 @@
 		nav {
 			height: 100%;
 			display: flex;
-			flex-direction: row;
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 32fbce2..95d5fef 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -4,14 +4,14 @@ import './Header.css';
 
 export interface HeaderProps {
 	children: ComponentChildren;
+	class?: string;
+	title: string;
 }
 
-const Header = ({ children }: HeaderProps) => {
+const Header = ({ children, title, ...props }: HeaderProps) => {
 	return (
-		<header class="__Header">
-			<div class="title">
-				<Button kind="ghost" href="/">DataNodes</Button>
-			</div>
+		<header class={(props.class || '') + ' __Header'}>
+			{title && <Button kind="ghost" class="title" href="/">{title}</Button>}
 			<nav>
 				{children}
 			</nav>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 43f5955..1f974e7 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -3,7 +3,7 @@ import { Header, Content, Button } from '../components';
 const Home = () => {
 	return (
 		<>
-			<Header>
+			<Header title="DataNodes">
 				<Button kind="ghost" href="/play">Try Now</Button>
 				<Button kind="ghost" href="/login">Log In</Button>
 				<Button kind="ghost" href="/signup">Sign Up</Button>
diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx
index 1f6cb70..3142da4 100644
--- a/src/pages/LogIn.tsx
+++ b/src/pages/LogIn.tsx
@@ -20,7 +20,7 @@ const LogIn = () => {
 
 	return (
 		<>
-			<Header>
+			<Header title="DataNodes">
 				<Button kind="ghost" href="/play">Try Now</Button>
 				<Button kind="ghost" href="/signup">Sign Up</Button>
 			</Header>
diff --git a/src/pages/ProjectsList.tsx b/src/pages/ProjectsList.tsx
index 324c9bd..3d86358 100644
--- a/src/pages/ProjectsList.tsx
+++ b/src/pages/ProjectsList.tsx
@@ -28,7 +28,7 @@ const ProjectsList = ({ user }) => {
 
 	return (
 		<>
-			<Header>
+			<Header title="DataNodes">
 				<Button kind="ghost" href="/account">My Account</Button>
 				<Button kind="ghost" onClick={() => logOut(pb)}>Log Out</Button>
 			</Header>
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 15b9f95..6e2c874 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -28,7 +28,7 @@ const SignUp = () => {
 
 	return (
 		<>
-			<Header>
+			<Header title="DataNodes">
 				<Button kind="ghost" href="/play">Try Now</Button>
 				<Button kind="ghost" href="/login">Log In</Button>
 			</Header>
-- 
cgit v1.2.3