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
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
;
}
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 {
constructor(props){
super(props);
@@ -14,7 +15,10 @@ class Quick extends React.Component {
render(): JSX.Element {
return
- {this.props.children}
+
Quick list
+
+ {this.props.children}
+
;
}
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 {
+
+ constructor(props){
+ super(props);
+ }
+
+ render(): JSX.Element {
+ return
+ {this.props.name}
+ {this.props.children}
+
;
+ }
+
+}
+
+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 {
+
constructor(props){
super(props);
}
render(): JSX.Element {
return
+ {this.props.name}
;
}
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