import React from 'react'


const baseURL = 'https://s3.eu-central-1.amazonaws.com/davidnaas-demo/';

const tracks = [
  { title: '140816', slug: '140816' },
  { title: 'Gloom IV', slug: 'Gloom+IV' },
  { title: 'I break fourses', slug: 'I+break+fourses' },
  { title: 'Milky Lemon', slug: 'Milky+lemon' },
  { title: 'Phase locked fugue', slug: 'Phase+locked+fugue' },
  { title: 'Test driven depression', slug: 'Test+driven+depression' },
];

const Demo = () => (
  <ul style={{ listStyle: 'none', paddingLeft: 0 }}>
    { (() => {
      return (
        tracks.map((track, i) => {
          return (
            <li key={i} style={{ marginBottom: '2rem' }}>
              <h3>{ track.title }</h3>
              <audio src={`${baseURL}${track.slug}.mp3`} controls="controls"/>
            </li>
          );
        })
      );
    })() }
  </ul>
)

export default Demo;

@@ -116,90 +116,8 @@
 = %5B%0A
-  %7B title: '140816', slug: '140816' %7D,%0A  %7B title: 'Gloom IV', slug: 'Gloom+IV' %7D,%0A
   %7B 
@@ -185,38 +185,60 @@
 e: '
-Milky Lemon', slug: 'Milky+lem
+Test driven depression', slug: 'Test+driven+depressi
 on' 
@@ -319,62 +319,122 @@
 e: '
-Test driven depression', slug: 'Test+driven+depression
+140816', slug: '140816' %7D,%0A  %7B title: 'Milky Lemon', slug: 'Milky+lemon' %7D,%0A  %7B title: 'Gloom IV', slug: 'Gloom+IV
 ' %7D,

Change demo order