first implemenation of quick items

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>
+			<div className="center-wrapper">
-				<QuickItem/>
+				<Quick>
-			</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>;
 	}
 

src/components/Quick.tsx

@@ -3,10 +3,11 @@ import * as PropTypes from "prop-types";
 
 import "../style/quick.scss";
 
-class Quick extends React.Component {
+interface Props {
-	static propTypes = {
+	children: React.ReactNode;
-		children : PropTypes.element
+}
-	};
+
+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>;
 	}
 

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;

src/components/QuickItem.tsx

@@ -3,17 +3,19 @@ import * as PropTypes from "prop-types";
 
 import "../style/quickItem.scss";
 
-class QuickItem extends React.Component {
+interface Props {
-	static propTypes = {
+	name: string;
-		url: PropTypes.string.isRequired
+}
-	};
+
-	
+class QuickItem extends React.Component<Props> {
+
 	constructor(props){
 		super(props);
 	}
 
 	render(): JSX.Element {
 		return <div className="quickItem-component">
+			{this.props.name}
 		</div>;
 	}
 

src/style/default.scss

@@ -1,3 +1,7 @@
 body {
 	background-color: darkgray;
+}
+
+.center-wrapper{
+	margin-top: 30%;
 }

src/style/quick.scss

@@ -1,3 +1,13 @@
 .quick-component {
-	background-color: green;
+	border: 3px solid green;
-}
+	width: 70%;
+	margin: auto;
+
+	.container {
+		display: flex;
+		justify-content: space-evenly;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+}

src/style/quickCategory.scss

@@ -0,0 +1,3 @@
+.quickCategory-component{
+
+}