add example content for targets page

assets/js/components/IconButton.js

@@ -0,0 +1,19 @@
+'use strict'
+
+import React from 'react'
+import '../../styles/shared/iconbutton.scss'
+
+function getSVG (icon) {
+  switch (icon) {
+    case 'delete': return '<svg viewBox="0 0 24 24"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>'
+    default: icon || 'missing icon prop'
+  }
+}
+
+const IconButton = props => {
+  return (
+    <button className='button icon' onClick={props.onClick} dangerouslySetInnerHTML={{__html: getSVG(props.icon)}} />
+  )
+}
+
+export default IconButton

assets/js/containers/UriListItem.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import React from 'react'
+import IconButton from '../components/IconButton'
+import '../../styles/shared/urilistitem.scss'
+
+class UriListItem extends React.Component {
+  constructor () {
+    super()
+  }
+  render () {
+    return (
+      <li className='uri-list-item flex-container'>
+        <span className='uri flex'>uri.uri</span>
+        <IconButton icon='delete' />
+      </li>
+    )
+  }
+}
+
+export default UriListItem

assets/styles/lib/default.scss

@@ -16,6 +16,12 @@ body,
   box-sizing: border-box;
 }
 
+h1 {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
 .flex-container {
   display: flex;
 

assets/styles/lib/vars.scss

@@ -21,6 +21,8 @@ $background-2: white;
 
 $text-dark-1: $black-1;
 $text-dark-2: $black-2;
+$text-light-1: white;
+$text-light-2: rgba(255,255,255,.75);
 
 $accent-1: #731212;
 $accent-2: #9a834d;

assets/styles/shared/iconbutton.scss

@@ -0,0 +1,23 @@
+@import '../lib/vars';
+
+.button.icon {
+  height: 40px;
+  line-height: 40px;
+  width: 40px;
+  padding: 5px;
+  background: transparent;
+  border: none;
+  outline: none;
+  border-radius: 50%;
+  transition: background 0.2s $transition,
+              box-shadow 0.2s $transition;
+  cursor: pointer;
+
+  &:hover {
+    background: $black-4;
+    box-shadow: $shadow-1;
+  }
+  path {
+    fill: $black-2;
+  }
+}

assets/styles/shared/twopanels.scss

@@ -0,0 +1,7 @@
+.nav-left {
+  min-width: 300px;
+  height: 100%;
+  background: $accent-1;
+  color: $text-light-1;
+  box-shadow: $shadow-1;
+}

assets/styles/shared/urilistitem.scss

@@ -0,0 +1,16 @@
+@import '../lib/vars';
+
+.uri-list-item {
+  height: 50px;
+  line-height: 50px;
+  background: $background-1;
+  box-shadow: $shadow-0;
+
+  .uri {
+    display: inline-block;
+    font-size: 16px;
+  }
+  & > .button.icon {
+    margin: 5px;
+  }
+}