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