diff --git a/src/App.js b/src/App.js index 4513d4b..bcad808 100644 --- a/src/App.js +++ b/src/App.js @@ -1,152 +1,87 @@ import React from "react"; import "./App.css"; +import Header from "./components/Header"; +import SubHeader from "./components/SubHeader"; +import Footer from "./components/Footer"; +import ImageSlider from "./components/ImageSlider"; +import TopNav from "./components/TopNav"; +import ProductDetail from "./components/ProductDetail"; function App(props) { + + const {products} = props.state; + console.log("props.currentCategory: ", props.currentCategory); + console.log("products: ", products) + + var filtered = []; + filtered = products.filter((prod) => { + return prod.category === props.currentCategory; + }); + console.log("filtered after filtering: ", filtered) + var productList = []; + productList = filtered.map((prod) =>{ + console.log("prod: ", {prod} ); + return + }); + + 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

- -
+ {productList}
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

@@ -157,53 +92,10 @@ function App(props) {
-
-
-
-

INFORMATION

- -
-
-

OUR OFFERS

- -
-
-

YOUR ACCOUNT

- -
-
-

Get in touch

-
    -
    • -
    • -
    • -
    • -
-

Design by W3layouts

-
-
-
+
- -
+
+ ); } diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..4be919a --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,51 @@ +import React from "react"; + +function Footer(props) { + 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..bfc28fb 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,7 +1,31 @@ import React from "react"; -function Header() { - return (
); +function Header(props) { + return ( +
+
+ +
+
+
    +
  • CURRENCY:
    • +
  • + +
    • +
+
+
+
+ ) } export default Header; diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js new file mode 100644 index 0000000..efb5886 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,15 @@ +import React from "react"; + +function ImageSlider(props) { + return( +
+
    +
    • +
    • +
    • +
+
+ ) +} + +export default ImageSlider; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..245a7cc --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,25 @@ +import React from "react"; +import PropTypes from "prop-types"; + +function ProductDetail(props) { + return( +
+ +

{props.product.name}

+

{props.product.description}

+

{props.product.price}

+ +
+ ) +} +ProductDetail.propTypes = { + category: PropTypes.string.isRequired, + currentCategory: PropTypes.string.isRequired, + // magicNumber: PropTypes.number.isRequired, + product: PropTypes.object.isRequired, + products: PropTypes.array.isRequired, + // names: PropTypes.array.isRequired + +}; + +export default ProductDetail; diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..302b42c --- /dev/null +++ b/src/components/SubHeader.js @@ -0,0 +1,22 @@ +import React from "react"; + +function SubHeader(props) { + return( +
+
+ +
+ +
+
+ ) +} + +export default SubHeader; diff --git a/src/components/TopNav.js b/src/components/TopNav.js new file mode 100644 index 0000000..098bed4 --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,44 @@ +import React from "react"; + +function TopNav(props) { + return( + + ) +} + +export default TopNav; diff --git a/src/index.js b/src/index.js index 34d8803..ef4086e 100644 --- a/src/index.js +++ b/src/index.js @@ -4,11 +4,18 @@ import App from "./App"; import "./index.css"; import state from "./state"; +let currentCategory = "tires"; +function changeCategory(category) { + currentCategory = category; + render(); +} + + + function render() { ReactDOM.render( - , - document.getElementById("root") + , + document.getElementById('root') ); } render(); -