diff --git a/README.md b/README.md index a6ae27c..7e83bc0 100644 --- a/README.md +++ b/README.md @@ -20,4 +20,4 @@ Fork, Clone, yarn install, yarn start * Modify TopNav * Remove existing href and replace with "#" * Register onClick for the links, make sure to use arrow function. Make sure to preventDefault. - * In the arrow function call props.changeCategory("tires"). Send in the category that is appropriate for the link + * In the arrow function call props.changeCategory("tires"). Send in the category that is appropriate for the link \ No newline at end of file diff --git a/src/App.js b/src/App.js index 4513d4b..3308f83 100644 --- a/src/App.js +++ b/src/App.js @@ -1,83 +1,61 @@ import React from "react"; import "./App.css"; +import Header from "./components/Header"; +import Footer from "./components/Footer"; +import ImageSlider from "./components/ImageSlider"; +import ProductDetail from "./components/ProductDetail"; +import TopNav from "./components/TopNav"; +import SubHeader from "./components/SubHeader"; -function App(props) { +function App(props) { + + // let categoryFilter = function catFil(currentCategory) { + // return props.product.filter(props.product.category === props.currentCategory); + // } + + // const categoryFilter = props.product.filter(props.product.category === 'tires'); + + const categoryFilter = props.product.filter((product) => { + return product.category === props.currentCategory + }); + + // const productMap = categoryFilter.map(categoryFilter([, [, ]]) => { + // return + // }[, thisArg]); + + // const productMap = categoryFilter.map(() => { + // return + // }); + + console.log(props.currentCategory); + console.log(categoryFilter); + //console.log(productMap); return (
-
-
- -
-
-
    -
  • CURRENCY:
    • -
  • - -
    • -
-
-
-
+
-
-
- -
- -
-
+
- + + +
-
- -
    -
    • -
    • -
    • -
- -
+
FEATURED PRODUCTS
-
+ {/* */} + {/*

Lorem Ipsum is simply

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

@@ -111,20 +89,15 @@ function App(props) {

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.

@@ -151,56 +124,13 @@ function App(props) {

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

-
-
-
+
diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..ea4f405 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,52 @@ +import React from "react"; + +function Footer(){ + return ( +
+
+
+

INFORMATION

+ +
+
+

OUR OFFERS

+ +
+
+

YOUR ACCOUNT

+ +
+
+

Get in touch

+
    +
    • +
    • +
    • +
    • +
+

Design by W3layouts

+
+
+
+ ); +} + +export default Footer; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js index f882be0..a251ae1 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,7 +1,30 @@ 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..98bdfb7 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,17 @@ +import React from "react"; + +function ImageSlider(){ + return( +
+ +
    +
    • +
    • +
    • +
+ +
+ ); +} + +export default ImageSlider; \ No newline at end of file diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..e3fb94a --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,16 @@ +import React from "react"; + +function ProductDetail(props){ + console.log(props.product); + return ( +
+ +

{props.product.name}

+

{props.product.description}

+

$600.00$512.00

+
Read More
+
+ ) +} + +export default ProductDetail; \ No newline at end of file diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..0ddf79a --- /dev/null +++ b/src/components/SubHeader.js @@ -0,0 +1,22 @@ +import React from "react"; + +function SubHeader(){ + return( +
+
+ +
+
+ + +
+
+
+ ); +} + +export default SubHeader; \ No newline at end of file diff --git a/src/components/TopNav.js b/src/components/TopNav.js new file mode 100644 index 0000000..9b6a8d3 --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,22 @@ +import React from "react"; + +function TopNav(props){ + return( +
+ +
+ ); + +} + +//const categoryFilter = props.products.filter(props.products.category); + +export default TopNav; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 34d8803..e721159 100644 --- a/src/index.js +++ b/src/index.js @@ -4,11 +4,24 @@ import App from "./App"; import "./index.css"; import state from "./state"; -function render() { + +let currentCategory = "tires"; + + +let categoryFilter = (currentCategory) => { + return state.products.filter(state.products.category === currentCategory); +} + +function changeCategory(category){ + + currentCategory = category + render(category) +} + +function render(props) { ReactDOM.render( - , + , document.getElementById("root") ); } -render(); - +render(); \ No newline at end of file