From b6abf82e0c8946353f973042bb58c30f3853496a Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 5 Jan 2021 10:45:35 +0100
Subject: coole titel

---
 src/components/page.tsx     | 18 ++++++++++++++++--
 src/components/vierkant.tsx | 19 +++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/components/vierkant.tsx

(limited to 'src/components')

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>
+	}
+}
+
-- 
cgit v1.2.3