preview items

src/App.js

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

src/components/collection-item/collection-item.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import './collection-item.styles.scss'
+
+const CollectionItem = ({id, name, imageUrl, price}) => (
+<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/collection-item/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-preview/collection-preview.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import CollectionItem from "../collection-item/collection-item";
+
+import './collection-preview.styles.scss'
+
+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, ...otherItemProps}) => (
+                    <CollectionItem key={id} {...otherItemProps}/>
+                ))}
+        </div>
+    </div>
+);
+
+export default CollectionPreview;

src/components/collection-preview/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/directory/directory.component.jsx

@@ -13,7 +13,7 @@ class Directory extends React.Component {
                     title: 'hats',
                     imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
                     id: 1,
-                    linkUrl: 'shop/hats'
+                    linkUrl: '/shop/hats'
                 },
                 {
                     title: 'jackets',

src/pages/shop/shop.component.jsx

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