updating our app with a shop page, coollection item and preview compo…

…nent

src/App.css

@@ -1,3 +1,4 @@
 body{
   font-family: 'Open Sans Condensed';
+  padding: 20px 60px;
 }

src/App.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import HomePage from './pages/homepage/homepage.component';
 import { Route,Switch } from 'react-router-dom';
+import ShopPage from './pages/shop/shop.component';
 import './App.css';
 
-const HatsPage = () => (
-  <div>
-    <h1>HATS PAGE</h1>
-  </div>
-
-)
 
 function App() {
   return (
     <div>
     <Switch>
       <Route exact path="/" component={HomePage} />
-      <Route exact path="/shop/hats" component={HatsPage} />
+      <Route exact path="/shop" component={ShopPage} />
     </Switch>
     </div>
   );

src/components/collection-items/collection-item.styles.scss

@@ -0,0 +1,32 @@
+.collection-item {
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+  height: 350px;
+  align-items: center;
+
+  .image {
+    width: 100%;
+    height: 95%;
+    background-size: cover;
+    background-position: center;
+    margin-bottom: 5px;
+  }
+
+  .collection-footer {
+    width: 100%;
+    height: 5%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 18px;
+
+    .name {
+      width: 90%;
+      margin-bottom: 15px;
+    }
+
+    .price {
+      width: 10%;
+    }
+  }
+}

src/components/collection-items/collection-items.component.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './collection-item.styles.scss';
+
+const CollectionItem = ({id, name, price, imageUrl}) => (
+    <div className='collection-item'>
+        <div
+            className='image'
+            style={{backgroundImage: `url(${imageUrl})`}}
+        ></div>
+        <div className='collection-footer'>
+            <span className='name'>{name}</span>
+            <span className='price'>{price}</span>
+        </div>
+    </div>
+)
+export default CollectionItem;

src/components/directory/directory.component.jsx

@@ -7,37 +7,43 @@ class Directory extends React.Component {
         super();
         this.state = {
             sections : [
-                {
-                  title: 'hats',
-                  imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
-                  id: 1,
-                  linkUrl: 'shop/hats'
+                  {
+                    title: 'hats',
+                    // imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
+                    imageUrl: 'images/hats.png', // local file in public/images/
+                    id: 1,
+                    linkUrl: 'shop/hats'
+
                 },
                 {
-                  title: 'jackets',
-                  imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
-                  id: 2,
-                  linkUrl: 'shop/jackets'
+                    title: 'jackets',
+                    // imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
+                    imageUrl: 'images/jackets.png', // local file in public/images/
+                    id: 2,
+                    linkUrl: 'shop/jackets'
                 },
                 {
-                  title: 'sneakers',
-                  imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
-                  id: 3,
-                  linkUrl: 'shop/sneakers'
+                    title: 'sneakers',
+                    // imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
+                    imageUrl: 'images/sneakers.png', // local file in public/images/
+                    id: 3,
+                    linkUrl: 'shop/sneakers'
                 },
                 {
-                  title: 'womens',
-                  imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
-                  size: 'large',
-                  id: 4,
-                  linkUrl: 'shop/womens'
+                    title: 'womens',
+                    // imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
+                    imageUrl: 'images/womens.png', // local file in public/images/
+                    size: 'large',
+                    id: 4,
+                    linkUrl: 'shop/womens'
                 },
                 {
-                  title: 'mens',
-                  imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
-                  size: 'large',
-                  id: 5,
-                  linkUrl: 'shop/mens'
+                    title: 'mens',
+                    // imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
+                    imageUrl: 'images/men.png', // local file in public/images/
+                    size: 'large',
+                    id: 5,
+                    linkUrl: 'shop/mens'
                 }
               ]
         }

src/components/preview-collection/collection-preview.styles.scss

@@ -0,0 +1,15 @@
+.collection-preview {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 30px;
+
+  .title {
+    font-size: 28px;
+    margin-bottom: 25px;
+  }
+
+  .preview {
+    display: flex;
+    justify-content: space-between;
+  }
+}

src/components/preview-collection/preview-collection-component.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import './collection-preview.styles.scss';
+
+import CollectionItem from '../collection-items/collection-items.component';
+
+
+const CollectionPreview = ({title, items}) => (
+    <div className='collection-preview'>
+        <h1 className="title">{title.toUpperCase()}</h1>
+        <div className='preview'>
+            {items
+            .filter((item,idx) => idx <4)
+            .map(({id,...restOfProps})=>(
+                <CollectionItem key={id} {...restOfProps} />
+            ))}
+        </div>
+    </div>
+)
+
+export default CollectionPreview;

src/pages/shop/shop.component.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ShopData from './shop.data';
+import CollectionPreview from '../../components/preview-collection/preview-collection-component';
+
+class ShopPage extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            collections:ShopData
+        }
+    }
+    render(){
+        const {collections} = this.state;
+        return(
+            <div className="shopPage">
+            {collections.map(({id, ...othersProps})=>(
+                <CollectionPreview key={id} {...othersProps} />
+            ))}
+            </div>
+
+        )
+    }
+}
+export default ShopPage;