From d2c2cc62a4c2e1ac10f8434bea7bb834da820869 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 16 Jan 2021 11:40:36 +0100
Subject: semi working next project

---
 components/toast.tsx | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 components/toast.tsx

(limited to 'components/toast.tsx')

diff --git a/components/toast.tsx b/components/toast.tsx
new file mode 100644
index 0000000..1d467bd
--- /dev/null
+++ b/components/toast.tsx
@@ -0,0 +1,78 @@
+import { CSSProperties, ReactNode, Component } from "react";
+
+import CloseIcon from '@material-ui/icons/Close';
+
+export function ToastArea(props: {
+	style?: CSSProperties
+	children?: ReactNode
+}) {
+	return <div id="ToastArea" style={{
+		position: "fixed",
+		whiteSpace: "nowrap",
+		bottom: 12,
+		left: "50%",
+		transform: "translateX(-50%)",
+		zIndex: 1,
+		maxWidth: 600,
+		width: "calc(100% - 48px - 48px)",
+		margin: "0 24px",
+		...props.style
+	}}>{props.children}</div>
+}
+
+export class Toast extends Component<{
+	text?: string
+	icon?: ReactNode
+	children?: ReactNode
+	type?: "normal"|"confirmation"|"error"
+	style?: CSSProperties
+}> {
+	state = { render: true }
+
+	close = () => this.setState({ render: false })
+
+	render () {
+		if (!this.state.render) return null;
+		return <div style={{
+			padding: 0,
+			marginBottom: 12,
+			borderRadius: 8,
+			color: "var(--text)",
+			boxShadow: "0 8px 12px -4px #00000033",
+			backgroundColor:
+				this.props.type === "normal" ? "var(--background)" :
+				this.props.type === "confirmation" ? "var(--disk-a)" :
+				this.props.type === "error" ? "var(--disk-b)" : "var(--background)",
+			...this.props.style
+		}}>
+		{
+			this.props.children ?
+			this.props.children :
+			<div style={{ lineHeight: 0 }}>
+				<div style={{
+					fontSize: 0,
+					margin: 16,
+					display: "inline-block",
+					verticalAlign: "top",
+					width: 32, height: 32
+				}}>{this.props.icon}</div>
+				<h2 style={{
+					margin: "20px 0",
+					display: "inline-block",
+					width: "calc(100% - 128px)",
+					verticalAlign: "top",
+					fontSize: 20
+				}}>{this.props.text}</h2>
+				<div style={{
+					padding: 20,
+					display: "inline-block",
+					cursor: "pointer"
+				}} onClick={this.close}>
+					<CloseIcon style={{ fontSize: 24 }}/>
+				</div>
+			</div>
+		}
+		</div>
+	}
+}
+
-- 
cgit v1.2.3


From 0c947a9f7d4ff3f9e65d01df21d6d50e9fa51095 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 31 Jan 2021 14:29:48 +0100
Subject: toast color fix

---
 components/toast.tsx | 4 ++--
 pages/index.tsx      | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

(limited to 'components/toast.tsx')

diff --git a/components/toast.tsx b/components/toast.tsx
index 1d467bd..e01683f 100644
--- a/components/toast.tsx
+++ b/components/toast.tsx
@@ -41,8 +41,8 @@ export class Toast extends Component<{
 			boxShadow: "0 8px 12px -4px #00000033",
 			backgroundColor:
 				this.props.type === "normal" ? "var(--background)" :
-				this.props.type === "confirmation" ? "var(--disk-a)" :
-				this.props.type === "error" ? "var(--disk-b)" : "var(--background)",
+				this.props.type === "confirmation" ? "var(--disk-b)" :
+				this.props.type === "error" ? "var(--disk-a)" : "var(--background)",
 			...this.props.style
 		}}>
 		{
diff --git a/pages/index.tsx b/pages/index.tsx
index bd7100e..ff4e2b7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, Component, useEffect } from 'react';
+import { CSSProperties, Component } from 'react';
 import axios from 'axios';
 import { userInfo } from '../api/api';
 
@@ -82,8 +82,9 @@ export default class HomePage extends Component {
 		return <div>
 			<NavBar/>
 			<ToastArea>
-				<Toast text="Gert" icon={<VideogameAssetIcon style={{ fontSize: 32 }}/>}/>
-				<Toast text="Gert"/>
+				<Toast text="Met icoon" icon={<VideogameAssetIcon style={{ fontSize: 32 }}/>}/>
+				<Toast text="Confirmation" type="confirmation"/>
+				<Toast text="Error" type="error"/>
 			</ToastArea>
 			<CenteredPage width={802}>
 				<PageTitle>4 op een rij</PageTitle>
-- 
cgit v1.2.3