diff --git a/src/App.js b/src/App.js index 4513d4b..6031661 100644 --- a/src/App.js +++ b/src/App.js @@ -1,210 +1,49 @@ import React from "react"; import "./App.css"; +//Components +import Header from './components/Header'; +import Footer from './components/Footer'; +import ImageSlider from './components/ImageSlider'; +import ProductDetail from './components/ProductDetail'; +import SubHeader from './components/SubHeader'; +import TopNav from './components/TopNav'; function App(props) { + const renderProducts = props.state.products + .filter( + (product) => product.category === props.currentCategory? true: false + ) + .map( + (product) => + ); + return (
-
- -
- -
-
- -
-
-
    -
  • CURRENCY:
    • -
  • - -
    • -
-
-
-
-
-
-
- -
- -
-
-
-
- -
- -
- - -
- -
    -
    • -
    • -
    • -
- -
- -
-
-
-
FEATURED PRODUCTS
-
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$512.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$300.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$120.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$500.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$120.00

- -
-
-
-
-
Our Specials
-
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$600.00$512.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$400.00$352.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$300.00$202.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$400.00$322.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$700.00$602.00

- -
-
-
-
-
-
-
-
-
-

INFORMATION

- -
-
-

OUR OFFERS

- -
-
-

YOUR ACCOUNT

- -
-
-

Get in touch

-
    -
    • -
    • -
    • -
    • -
-

Design by W3layouts

-
-
-
-
- +
+
+
+
+ +
+ +
+ + + +
+
+
+
FEATURED PRODUCTS
+
+ {renderProducts} +
+
+
+
+
+
+
); } - export default App; diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..c72505f --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,51 @@ +import React from 'react'; + +const Footer = () => { + return ( +
+
+
+

INFORMATION

+ +
+
+

OUR OFFERS

+ +
+
+

YOUR ACCOUNT

+ +
+
+

Get in touch

+
    +
    • +
    • +
    • +
    • +
+

Design by W3layouts

+
+
+
+ ); +} +export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js index f882be0..0222ec6 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,7 +1,31 @@ import React from "react"; function Header() { - return (
); + return ( +
+
+ +
+
+
    +
  • CURRENCY:
    • +
  • + +
    • +
+
+
+
+ ); } export default Header; diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js new file mode 100644 index 0000000..c0db573 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,16 @@ +import React from 'react'; + +const ImageSlider = (props) => { + return ( +
+ +
    +
    • +
    • +
    • +
+ +
+ ); +}; +export default ImageSlider; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..5acc0fe --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,20 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const ProductDetail = (props) => { + const {id, name, description, price, imgUrl, category, rating, reviews} = props.product; + return ( +
+ +

{name}

+

{description}

+

{price}

+ +
+ ); +}; +export default ProductDetail; + + ProductDetail.propTypes = { + product: PropTypes.object.isRequired + } diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..b540b00 --- /dev/null +++ b/src/components/SubHeader.js @@ -0,0 +1,21 @@ +import React from 'react'; + +const SubHeader = () => { + return ( +
+
+ +
+ +
+
+ ); +}; +export default SubHeader; diff --git a/src/components/TopNav.js b/src/components/TopNav.js new file mode 100644 index 0000000..54a0187 --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,18 @@ +import React from 'react'; + +const TopNav = (props) => { + return ( + + ); +}; +export default TopNav; diff --git a/src/index.js b/src/index.js index 34d8803..5f10908 100644 --- a/src/index.js +++ b/src/index.js @@ -4,11 +4,17 @@ import App from "./App"; import "./index.css"; import state from "./state"; +let currentCategory = "tires"; + +const changeCategory = (category) => { + currentCategory = category + render() +}; + function render() { ReactDOM.render( - , + , document.getElementById("root") ); } render(); - diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - -