1 files changed, 48 insertions, 0 deletions
diff --git a/client/components/Paintings.jsx b/client/components/Paintings.jsx
new file mode 100644
index 0000000..93b24eb
--- /dev/null
+++ b/client/components/Paintings.jsx
@@ -0,0 +1,48 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+import util from '../util'
+
+export default class Paintings extends Component {
+  constructor() {
+    super()
+  }
+  render() {
+    const paintings = this.props.data.painting.map( (painting, i) => {
+      return (
+        <div class='cell' key={i}>
+          <div class='painting'>
+            <div class='image' style={'background-image: url(' + painting.image.uri + ')'} />
+          </div>
+          <div class='about'>
+            <div>
+              <div>{painting.title}</div>
+              <div>{painting.medium}</div>
+              <div>{painting.date}</div>
+              <div>{painting.image.caption}</div>
+              <br/>
+              <Link to={'/painting/' + painting.id}>
+                More info &gt;
+              </Link>
+            </div>
+          </div>
+        </div>
+      )
+    })
+    const about = this.props.data.page[0]
+    const body = (about.body || '').replace(/\n/g,'<br>')
+    const page = (
+      <div class='cell'>
+        <div class='painting'>
+          <div class='image' style={'background-image: url(' + about.image.uri + ')'} />
+        </div>
+        <div class='about' dangerouslySetInnerHTML={{ __html: body }} />
+      </div>
+    )
+    return (
+      <div class='paintings'>
+        {paintings}
+        {page}
+      </div>
+    )
+  }
+}