From 0d4c9695dc4e5a2c8e7e431752c6f09f92fa9445 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Fri, 8 Jan 2021 13:41:26 +0100
Subject: semi werkende checkbox

---
 src/components/gameSettings.tsx | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

(limited to 'src/components/gameSettings.tsx')

diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx
index 9f96c52..19eadb7 100644
--- a/src/components/gameSettings.tsx
+++ b/src/components/gameSettings.tsx
@@ -1,11 +1,9 @@
-// interface CurrentGameSettingsProps {
-// gameID: string;
-// }
+import { ReactNode } from 'react';
 
-import { Button } from './ui';
+import { Button, Vierkant, CheckBox } from './ui';
+import { DialogBox } from './dialogBox';
 
 import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
-import {DialogBox} from './dialogBox';
 
 export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
 	return <div style={{
@@ -46,7 +44,21 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
 			}}>Spelregels aanpassen</span>
 		</Button>
 	</div>;
+}
+
+interface GameSettingsSectionProps {
+	children?: ReactNode;
+	title: string;
+	state: boolean;
+}
 
+function GameSettingsSection(props: GameSettingsSectionProps) {
+	return <Vierkant style={{
+		backgroundColor: "var(--background-alt)",
+		width: "calc(100% - 12px)"
+	}}>
+	<div>{props.children}</div>
+	</Vierkant>
 }
 
 export function EditGameSettings() {
@@ -56,16 +68,9 @@ export function EditGameSettings() {
 			maxHeight: 500,
 			overflowY: "scroll"
 		}}>
-			<span>Hier is een scrollende pagina in een dialoogvenster</span>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
+			<CheckBox state={false}/>
+			<GameSettingsSection title="Tijdslimiet" state={false}>
+			</GameSettingsSection>
 		</div>
 	</DialogBox>;
 }
-- 
cgit v1.2.3