1 files changed, 34 insertions, 5 deletions
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index d4bec4f..53d5b9f 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -1,18 +1,47 @@
 import { Query } from 'react-apollo';
 import PropTypes from 'prop-types';
 import { SINGLE_ITEM_QUERY } from '../queries/index';
+import Dump from './Dump';
+import styled from 'styled-components';
+import Link from 'next/link';
+import Error from './ErrorMessage';
+
+const SingleItemStyles = styled.div`
+  max-width: 1200px;
+  margin: 2rem auto;
+  box-shadow: ${props => props.theme.bs};
+  img {
+    width: 100%;
+    object-fit: cover;
+  }
+  .details {
+    margin: 3rem;
+    font-size: 3rem;
+  }
+`;
 
 const SingleItem = props => (
   <Query query={SINGLE_ITEM_QUERY} variables={{ id: props.id }}>
     {({ data: { items }, loading, error }) => {
-      if (loading || error) return null;
+      if (loading) return <p>Loading...</p>;
       const [item] = items;
       return (
-        <div>
+        <SingleItemStyles>
+          <Error error={error} />
           <img src={item.largeImage || item.image} alt={item.title} />
-          <h2>Viewing {item.title}</h2>
-          <p>{item.description}</p>
-        </div>
+          <div className="details">
+            <h2>Viewing {item.title}</h2>
+            <p>{item.description}</p>
+            <Link
+              href={{
+                pathname: '/admin/update',
+                query: { id: item.id },
+              }}
+            >
+              <a>Edit ✏️</a>
+            </Link>
+          </div>
+        </SingleItemStyles>
       );
     }}
   </Query>