From 0625e57be0bb7ffdb431ff5c87096034b90e0b23 Mon Sep 17 00:00:00 2001
From: Niklas <niklas@kapelle.org>
Date: Wed, 22 Apr 2020 02:40:51 +0200
Subject: [PATCH] first implemenation of quick items

---
 src/components/App.tsx           | 26 +++++++++++++++++++++++---
 src/components/Quick.tsx         | 14 +++++++++-----
 src/components/QuickCategory.tsx | 26 ++++++++++++++++++++++++++
 src/components/QuickItem.tsx     | 12 +++++++-----
 src/style/default.scss           |  4 ++++
 src/style/quick.scss             | 14 ++++++++++++--
 src/style/quickCategory.scss     |  3 +++
 7 files changed, 84 insertions(+), 15 deletions(-)
 create mode 100644 src/components/QuickCategory.tsx
 create mode 100644 src/style/quickCategory.scss

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 272bbd6..afe68b5 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 
 import Quick from "./Quick";
 import QuickItem from "./QuickItem";
+import QuickCategory from "./QuickCategory";
 
 class App extends React.Component {
 	constructor(props) {
@@ -10,9 +11,28 @@ class App extends React.Component {
 
 	render(): JSX.Element {
 		return <div>
-			<Quick>
-				<QuickItem/>
-			</Quick>
+			<div className="center-wrapper">
+				<Quick>
+					<QuickCategory name="Cat 1">
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+					</QuickCategory>
+					<QuickCategory name="Cat 2">
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+					</QuickCategory>
+					<QuickCategory name="Cat 3">
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+						<QuickItem name="Hello World" />
+					</QuickCategory>
+				</Quick>
+			</div>
 		</div>;
 	}
 
diff --git a/src/components/Quick.tsx b/src/components/Quick.tsx
index f40a4bf..5d04ae9 100644
--- a/src/components/Quick.tsx
+++ b/src/components/Quick.tsx
@@ -3,10 +3,11 @@ import * as PropTypes from "prop-types";
 
 import "../style/quick.scss";
 
-class Quick extends React.Component {
-	static propTypes = {
-		children : PropTypes.element
-	};
+interface Props {
+	children: React.ReactNode;
+}
+
+class Quick extends React.Component<Props> {
 	
 	constructor(props){
 		super(props);
@@ -14,7 +15,10 @@ class Quick extends React.Component {
 
 	render(): JSX.Element {
 		return <div className="quick-component">
-			{this.props.children}
+			<p>Quick list</p>
+			<div className="container">
+				{this.props.children}
+			</div>
 		</div>;
 	}
 
diff --git a/src/components/QuickCategory.tsx b/src/components/QuickCategory.tsx
new file mode 100644
index 0000000..482da47
--- /dev/null
+++ b/src/components/QuickCategory.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+
+import "../style/quickCategory.scss";
+
+interface Props {
+	children: React.ReactNode;
+	name: string;
+}
+
+class QuickCategory extends React.Component<Props> {
+	
+	constructor(props){
+		super(props);
+	}
+
+	render(): JSX.Element {
+		return <div className="quickCategory-component">
+			{this.props.name}
+			{this.props.children}
+		</div>;
+	}
+
+}
+
+export default QuickCategory;
diff --git a/src/components/QuickItem.tsx b/src/components/QuickItem.tsx
index 08ec425..c9c6e6d 100644
--- a/src/components/QuickItem.tsx
+++ b/src/components/QuickItem.tsx
@@ -3,17 +3,19 @@ import * as PropTypes from "prop-types";
 
 import "../style/quickItem.scss";
 
-class QuickItem extends React.Component {
-	static propTypes = {
-		url: PropTypes.string.isRequired
-	};
-	
+interface Props {
+	name: string;
+}
+
+class QuickItem extends React.Component<Props> {
+
 	constructor(props){
 		super(props);
 	}
 
 	render(): JSX.Element {
 		return <div className="quickItem-component">
+			{this.props.name}
 		</div>;
 	}
 
diff --git a/src/style/default.scss b/src/style/default.scss
index 33a884d..44b2ed7 100644
--- a/src/style/default.scss
+++ b/src/style/default.scss
@@ -1,3 +1,7 @@
 body {
 	background-color: darkgray;
+}
+
+.center-wrapper{
+	margin-top: 30%;
 }
\ No newline at end of file
diff --git a/src/style/quick.scss b/src/style/quick.scss
index 5872cd0..9c89e27 100644
--- a/src/style/quick.scss
+++ b/src/style/quick.scss
@@ -1,3 +1,13 @@
 .quick-component {
-	background-color: green;
-}
\ No newline at end of file
+	border: 3px solid green;
+	width: 70%;
+	margin: auto;
+
+	.container {
+		display: flex;
+		justify-content: space-evenly;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+}
diff --git a/src/style/quickCategory.scss b/src/style/quickCategory.scss
new file mode 100644
index 0000000..36db9a4
--- /dev/null
+++ b/src/style/quickCategory.scss
@@ -0,0 +1,3 @@
+.quickCategory-component{
+
+}
\ No newline at end of file