diff options
| -rw-r--r-- | src/components/Header.css | 3 | ||||
| -rw-r--r-- | src/components/Header.tsx | 10 | ||||
| -rw-r--r-- | src/pages/Home.tsx | 2 | ||||
| -rw-r--r-- | src/pages/LogIn.tsx | 2 | ||||
| -rw-r--r-- | src/pages/ProjectsList.tsx | 2 | ||||
| -rw-r--r-- | 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> |