Add sample photos. Link to gallery from single page.

Author: dev-geddy

public/images/architecture.jpg

@@ -1,4 +1,5 @@
 import React, {Component} from 'react'
+import {Link} from 'react-router-dom'
 import pictures from '../sampleData/pictures'
 import './Picture.css'
 
@@ -10,7 +11,7 @@ class Picture extends Component {
         <article>
           <h2>Picture details</h2>
           <h3>{pictures[pictureIndex].name}</h3>
-          <p>It is only about a single picture.</p>
+          <p>It is only about a single picture. Go back to <Link to="/pictures">gallery</Link></p>
           <div>
             <img src={pictures[pictureIndex].url} alt="Nice one"/>
           </div>

public/images/night-shot.jpg

@@ -19,7 +19,11 @@
   font-weight: 400;
 }
 
-.Picture > img {
+.Picture > a {
+  display: block;
+}
+
+.Picture > a > img {
   display: block;
   width: 100%;
   height: auto;

public/images/picture-00.png

@@ -7,11 +7,10 @@ const RenderPictures = (picturesList) => {
   return picturesList.map((picture, index) => {
     return (
       <div className="Picture" key={`MyPicture_${index}`}>
-        <img src={picture.url} alt={picture.name}/>
+        <Link to={`/picture/${index}`}>
+          <img src={picture.url} alt={picture.name}/>
+        </Link>
         <div className="Picture-name">{picture.name}</div>
-        <div className="Picture-details-link">
-          <Link to={`/picture/${index}`}>{picture.name} &raquo;</Link>
-        </div>
       </div>
     )
   })

public/images/shard-clouds.jpg

@@ -1,19 +1,19 @@
 const pictures = [
   {
-    name: "Landscape",
-    url: "/images/picture-00.png",
+    name: "Architecture",
+    url: "/images/architecture.jpg",
   },
   {
-    name: "Bird's Eye View",
-    url: "/images/picture-00.png",
+    name: "Night Shot",
+    url: "/images/night-shot.jpg",
   },
   {
-    name: "Vehicle",
-    url: "/images/picture-00.png",
+    name: "The Shard",
+    url: "/images/shard-clouds.jpg",
   },
   {
-    name: "Clouds",
-    url: "/images/picture-00.png",
+    name: "Tower Bridge",
+    url: "/images/tower-bridge.jpg",
   }
 ]