coole titel

3 files changed, 49 insertions, 4 deletions

diff --git a/src/components/page.tsx b/src/components/page.tsx
index 03a6fbc..045b0f7 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -8,7 +8,21 @@ var CenteredPageStyle: CSSProperties = {
 export class CenteredPage extends Component {
 	render () {
 		return <div style={CenteredPageStyle}>
-			{this.props.children}
-		</div>
+			<div style={{margin: "0 6px"}}> {this.props.children} </div>
+		</div>;
+	}
+}
+
+var PageTitleStyle: CSSProperties = {
+	color: "var(--background)",
+	marginLeft: 6,
+	marginTop: 32,
+	marginBottom: 64,
+	fontSize: 25
+}
+
+export class PageTitle extends Component {
+	render () {
+		return <h1 style={PageTitleStyle}>{this.props.children}</h1>;
 	}
 }
diff --git a/src/components/vierkant.tsx b/src/components/vierkant.tsx
new file mode 100644
index 0000000..cfb843e
--- /dev/null
+++ b/src/components/vierkant.tsx
@@ -0,0 +1,19 @@
+import { Component, CSSProperties } from "react";
+
+var VierkantStyle: CSSProperties = {
+	padding: 24,
+	backgroundColor: "var(--background)",
+	borderRadius: 8,
+	color: "var(--text)",
+	margin: 6, // geen margin collapse = 12px marge
+	display: "inline-block"
+}
+
+export class Vierkant extends Component {
+	render () {
+		return <div style={VierkantStyle}>
+			{this.props.children}
+		</div>
+	}
+}
+
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 547f3e9..11a72d6 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -1,12 +1,24 @@
 import { NavBar } from '../components/navbar';
-import { CenteredPage } from '../components/page.tsx';
+import { CenteredPage, PageTitle } from '../components/page';
+import { Vierkant, VierkantWrapper } from '../components/vierkant';
 
 function HomePage() {
 	return (
 		<div>
 			<NavBar />
 			<CenteredPage>
-				<div>Zalige content op deze pagina yo</div>
+				<PageTitle>4 op een rij</PageTitle>
+				<Vierkant>Gert</Vierkant>
+				<Vierkant>Gert2</Vierkant>
+				<Vierkant>Gert3</Vierkant>
+				<Vierkant>Gert4</Vierkant>
+				<Vierkant>Gert5</Vierkant>
+				<Vierkant>Gert6</Vierkant>
+				<Vierkant>Gert7</Vierkant>
+				<Vierkant>Gert8</Vierkant>
+				<Vierkant>Gert9</Vierkant>
+				<Vierkant>Gert10</Vierkant>
+				<Vierkant>Gert11</Vierkant>
 			</CenteredPage>
 		</div>
 	);