dialoogvensters

4 files changed, 38 insertions, 9 deletions

diff --git a/src/components/dialogBox.tsx b/src/components/dialogBox.tsx
new file mode 100644
index 0000000..778cd7a
--- /dev/null
+++ b/src/components/dialogBox.tsx
@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+
+import { Vierkant } from './vierkant';
+
+import CancelIcon from '@material-ui/icons/Cancel';
+
+interface DialogBoxProps {
+	children: ReactNode;
+	title: string;
+}
+
+export function DialogBox(props: DialogBoxProps) {
+	return <Vierkant style={{
+		position: "fixed",
+		top: "50%", left: "50%",
+		transform: "translate(-50%, -50%)",
+		boxShadow: "0 8px 32px -5px #0007",
+		width: 392
+	}}>
+		<h2 style={{ marginBottom: 24 }}>{props.title}</h2>
+		<CancelIcon style={{
+			position: "absolute",
+			top: 25, right: 25,
+			color: "var(--text)",
+			opacity: .85,
+			cursor: "pointer"
+		}}/>
+		{props.children}
+	</Vierkant>
+}
diff --git a/src/components/vierkant.tsx b/src/components/vierkant.tsx
index 588d73d..558eab8 100644
--- a/src/components/vierkant.tsx
+++ b/src/components/vierkant.tsx
@@ -1,9 +1,10 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 interface VierkantProps {
 	href?: string;
 	width?: string;
 	height?: string;
+	style?: CSSProperties;
 	children?: ReactNode;
 }
 
@@ -19,6 +20,7 @@ export function Vierkant(props: VierkantProps) {
 		boxSizing: "border-box",
 		width: props.width ? props.width : undefined,
 		height: props.height ? props.height : undefined,
+		...props.style
 	}} href={props.href}>{props.children}</a>
 }
 
diff --git a/src/components/voerBord.tsx b/src/components/voerBord.tsx
index 28de567..c430d02 100644
--- a/src/components/voerBord.tsx
+++ b/src/components/voerBord.tsx
@@ -28,12 +28,6 @@ export function VoerBord(props: VoerBordProps) {
 							border: "2px solid var(--background-alt)",
 							opacity: .5
 						}}/>
-						<div style={{
-							position: "absolute",
-							top: 2, left: 2, right: 2, bottom: 2,
-							backgroundColor: "var(--disk-a)",
-							borderRadius: 999999
-						}}/>
 					</td>
 				))}
 			</tr>
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index b248631..d02410e 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -1,14 +1,17 @@
 import { NavBar } from '../components/navbar';
-import { CenteredPage, PageTitle } from '../components/page';
+import { CenteredPage } from '../components/page';
 import { VoerBord } from '../components/voerBord';
+import { DialogBox } from '../components/dialogBox';
 
 export default function GamePage() {
 	return (
 		<div>
 			<NavBar/>
 			<CenteredPage width={900}>
-				<PageTitle>Niew spel starten</PageTitle>
 				<VoerBord width={7} height={6}/>
+				<DialogBox title="Nieuw spel">
+					<p>Hier is meer informatie over dit dialoogvenster</p>
+				</DialogBox>
 			</CenteredPage>
 		</div>
 	);