CenteredPage toegevoegd

4 files changed, 22 insertions, 6 deletions

diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 1d1f3c6..b0f358f 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -6,7 +6,7 @@ export function LogoDark() {
 				<circle cx="6.5" cy="6.5" r="4.5" fill="var(--disk-b)"/>
 				<circle cx="6.5" cy="17.5" r="4.5" fill="var(--disk-a)"/>
 				<circle cx="17.5" cy="17.5" r="4.5" fill="var(--disk-b)"/>
-				<circle cx="17.5" cy="6.5" r="3.5" stroke="var(--text)" stroke-width="2"/>
+				<circle cx="17.5" cy="6.5" r="3.5" stroke="var(--text)" strokeWidth="2"/>
 			</svg>
 		</div>
 	);
@@ -20,7 +20,7 @@ export function LogoLight() {
 				<circle cx="6.5" cy="6.5" r="4.5" fill="var(--disk-b)"/>
 				<circle cx="6.5" cy="17.5" r="4.5" fill="var(--disk-a)"/>
 				<circle cx="17.5" cy="17.5" r="4.5" fill="var(--disk-b)"/>
-				<circle cx="17.5" cy="6.5" r="3.5" stroke="var(--background)" stroke-width="2"/>
+				<circle cx="17.5" cy="6.5" r="3.5" stroke="var(--background)" strokeWidth="2"/>
 			</svg>
 		</div>
 	);
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 45818b3..904e64a 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -38,7 +38,7 @@ var NavBarSettingsAreaStyle: CSSProperties = {
 	left: 0
 }
 
-function NavBar() {
+export function NavBar() {
 	return (
 		<div className="navbar" style={NavBarStyle}>
 			<div style={NavBarItemStyle}><LogoDark/></div>
@@ -54,4 +54,3 @@ function NavBar() {
 	);
 }
 
-export default NavBar;
diff --git a/src/components/page.tsx b/src/components/page.tsx
new file mode 100644
index 0000000..03a6fbc
--- /dev/null
+++ b/src/components/page.tsx
@@ -0,0 +1,14 @@
+import { Component, CSSProperties } from 'react';
+
+var CenteredPageStyle: CSSProperties = {
+	maxWidth: 783,
+	margin: "0 auto"
+}
+
+export class CenteredPage extends Component {
+	render () {
+		return <div style={CenteredPageStyle}>
+			{this.props.children}
+		</div>
+	}
+}
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index b9d7926..547f3e9 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -1,10 +1,13 @@
-import NavBar from '../components/navbar';
+import { NavBar } from '../components/navbar';
+import { CenteredPage } from '../components/page.tsx';
 
 function HomePage() {
 	return (
 		<div>
 			<NavBar />
-			<div>Zalige content op deze pagina yo</div>
+			<CenteredPage>
+				<div>Zalige content op deze pagina yo</div>
+			</CenteredPage>
 		</div>
 	);
 }