diff --git a/README.md b/README.md old mode 100644 new mode 100755 index a6ae27c..a9c1d0e --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ ### Setup -Fork, Clone, yarn install, yarn start +DONE --- Fork, Clone, yarn install, yarn start ### Do * Take the html out of the App component and put in separate components - * Header - look for div with a className of "top-header" - * Footer - look for div with a className of "footer" - * ImageSlider - look for div with className of "image-slider" - * ProductDetail - look for div with className of "grid_1_of_5" + * DONE --- Header - look for div with a className of "top-header" + * DONE --- Footer - look for div with a className of "footer" + * DONE --- ImageSlider - look for div with className of "image-slider" + * DONE --- ProductDetail - look for div with className of "grid_1_of_5" * Use PropTypes to require a prop "product" - * Use product prop to populate the UI instead of hard coded - * SubHeader - look for div with className of "sub-header" - * TopNav - look for div with className of "top-nav" -* Make sure to import and use all these components back in App + * Use product prop to populate the UI instead of hard coded + * DONE --- SubHeader - look for div with className of "sub-header" + * DONE --- TopNav - look for div with className of "top-nav" +* DONE --- Make sure to import and use all these components back in App * Create a variable in index.js called currentCategory and set it to "tires" * Create a function in index.js called changeCategory thats takes a parameter category. It will assign category to currentCategory and call render() * Send the changeCategory function to App and then to the TopNav component by way of props diff --git a/package.json b/package.json old mode 100644 new mode 100755 diff --git a/public/favicon.ico b/public/favicon.ico old mode 100644 new mode 100755 diff --git a/src/App.css b/src/App.css old mode 100644 new mode 100755 diff --git a/src/App.js b/src/App.js old mode 100644 new mode 100755 index 4513d4b..e09bef3 --- a/src/App.js +++ b/src/App.js @@ -1,117 +1,38 @@ import React from "react"; +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"; import "./App.css"; + 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,52 +78,9 @@ function App(props) {
-
-
-
-

INFORMATION

- -
-
-

OUR OFFERS

- -
-
-

YOUR ACCOUNT

- -
-
-

Get in touch

-
    -
    • -
    • -
    • -
    • -
-

Design by W3layouts

-
-
-
+
- +
); } diff --git a/src/App.test.js b/src/App.test.js old mode 100644 new mode 100755 diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..a139402 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,51 @@ +import React from "react"; + +function 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 old mode 100644 new mode 100755 index f882be0..d55d76a --- 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..a6674f8 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,15 @@ +import React from "react"; + +function ImageSlider() { + return ( +
+
    +
    • +
    • +
    • +
+
+ ); +} + +export default ImageSlider; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..1174ef1 --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,22 @@ +import React from "react"; +import PropTypes from "prop-types"; + +function ProductDetail(props) { + console.log(props); + // Always define before using props. Could be in context of map fnc or not + return ( +
+ +

Lorem Ipsum is simply

+

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

+

$512.00

+
Read More
+
+ ); +} + +ProductDetail.propTypes = { + product: PropTypes.object.isRequired +}; + +export default ProductDetail; diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..5d36bf0 --- /dev/null +++ b/src/components/SubHeader.js @@ -0,0 +1,22 @@ +import React from "react"; + +function SubHeader() { + return( +
+
+ +
+
+ + +
+
+
+ ); +} + +export default SubHeader; diff --git a/src/components/TopNav.js b/src/components/TopNav.js new file mode 100644 index 0000000..a8d01bf --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,19 @@ +import React from "react"; + +function TopNav() { + return ( +
+ +
+ ); +} + +export default TopNav; diff --git a/src/index.css b/src/index.css old mode 100644 new mode 100755 diff --git a/src/index.js b/src/index.js old mode 100644 new mode 100755 diff --git a/src/logo.svg b/src/logo.svg old mode 100644 new mode 100755 diff --git a/src/state.js b/src/state.js old mode 100644 new mode 100755 diff --git a/yarn.lock b/yarn.lock old mode 100644 new mode 100755