diff options
| -rw-r--r-- | src/components/page.tsx | 18 | ||||
| -rw-r--r-- | src/components/vierkant.tsx | 19 | ||||
| -rw-r--r-- | src/pages/home.jsx | 16 |
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> ); |