From 19dafdc945df9c0610c29eab8254f79138816534 Mon Sep 17 00:00:00 2001 From: CruzMendez Date: Sat, 4 Nov 2017 14:35:18 -0500 Subject: [PATCH 1/3] Homework 2 added components. working on product details --- src/App.js | 167 +++++--------------------------- src/components/Footer.js | 52 ++++++++++ src/components/Header.js | 27 +++++- src/components/ImageSlider.js | 15 +++ src/components/ProductDetail.js | 22 +++++ src/components/SubHeader.js | 22 +++++ src/components/TopNav.js | 19 ++++ src/state.js | 2 +- 8 files changed, 183 insertions(+), 143 deletions(-) create mode 100644 src/components/Footer.js create mode 100644 src/components/ImageSlider.js create mode 100644 src/components/ProductDetail.js create mode 100644 src/components/SubHeader.js create mode 100644 src/components/TopNav.js diff --git a/src/App.js b/src/App.js index 4513d4b..429ec25 100644 --- a/src/App.js +++ b/src/App.js @@ -1,117 +1,42 @@ import React from "react"; import "./App.css"; +import Header from "./components/Header"; +import Footer from "./components/Footer"; +import ImageSlider from "./components/ImageSlider"; +import SubHeader from "./components/SubHeader"; +import TopNav from "./components/TopNav"; +import ProductDetails from "./components/ProductDetail"; + function App(props) { 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

- -
+ + + +
@@ -157,53 +82,13 @@ function App(props) {
-
-
-
-

INFORMATION

- -
-
-

OUR OFFERS

- -
-
-

YOUR ACCOUNT

- -
-
-

Get in touch

-
    -
    • -
    • -
    • -
    • -
-

Design by W3layouts

-
-
+ +
+
-
- -
+ + //removed
's from here... + ); } diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..54432fb --- /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..c22b74c 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,7 +1,32 @@ 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..f099b08 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,15 @@ +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..43c58b1 --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,22 @@ +import React from "react"; +import propTypes from "prop-types"; + +function ProductDetails(props) { + let {imgUrl, name, description, price } = props.product; + + return( +
+ +

{name}

+

{description}

+

{price}

+
Read More
+
+ ); +} + +ProductDetails.propTypes = { + product: propTypes.object.isRequired +} + +export default ProductDetails; \ No newline at end of file diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..4fce816 --- /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..85b9003 --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,19 @@ +import React from "react"; + +function TopNav(){ + return( +
+ +
+ ); +} + +export default TopNav; \ No newline at end of file diff --git a/src/state.js b/src/state.js index 4f52c2c..b615d2f 100644 --- a/src/state.js +++ b/src/state.js @@ -1,5 +1,5 @@ export default { - products:[{ + product:[{ "id": 1, "name": "Namfix", "description": "Extraction of Nasal Turbinate, Open Approach", From efb6bb0d15c2940ac701d430c10207336e0427cc Mon Sep 17 00:00:00 2001 From: CruzMendez Date: Sat, 4 Nov 2017 16:05:59 -0500 Subject: [PATCH 2/3] update added onClick --- src/App.js | 16 ++++++++++------ .../{ProductDetail.js => ProductDetails.js} | 0 src/components/TopNav.js | 15 +++++++++------ src/index.js | 9 ++++++++- 4 files changed, 27 insertions(+), 13 deletions(-) rename src/components/{ProductDetail.js => ProductDetails.js} (100%) diff --git a/src/App.js b/src/App.js index 429ec25..d13b297 100644 --- a/src/App.js +++ b/src/App.js @@ -5,10 +5,15 @@ import Footer from "./components/Footer"; import ImageSlider from "./components/ImageSlider"; import SubHeader from "./components/SubHeader"; import TopNav from "./components/TopNav"; -import ProductDetails from "./components/ProductDetail"; +import ProductDetails from "./components/ProductDetails"; function App(props) { + + const productCards = props.state.product + .filter((product) => product.category === props.currentCategory? true: false) + .map((product, i) => ) + return (
@@ -19,10 +24,10 @@ function App(props) {
- +
- +
@@ -34,8 +39,7 @@ function App(props) {
FEATURED PRODUCTS
- - + {productCards}
@@ -86,7 +90,7 @@ function App(props) {