breakout demo data

ui/components/demos/tap.js

@@ -2,15 +2,12 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import Role from '../role/demo'
-
-const roles = [
-  'cute', 'vanity', 'brave', 'proud', 'wonderful', '日本語'
-]
+import demoRoles from '../../config/demo'
 
 const DemoWrapper = styled.div`
   text-align: center;
 `
 
 export default () => <DemoWrapper>
-  { roles.map((v, i) => <Role key={i} role={{ name: `a ${v} role ♡`, color: `hsl(${(360 / roles.length) * i},40%,70%)` }} />) }
+  { demoRoles.map((v, i) => <Role key={i} role={v} />) }
 </DemoWrapper>

ui/components/demos/typing.js

@@ -3,6 +3,7 @@ import moment from 'moment'
 import Typist from 'react-typist'
 import styled from 'styled-components'
 import MediaQuery from '../../kit/media'
+import demoRoles from '../../config/demo'
 
 const Outer = styled.div`
   background-color: var(--dark-but-not-black);
@@ -72,18 +73,10 @@ const Typing = () => <Outer>
   </Chat>
   <TextArea>
     <Typist cursor={{ blink: true }}>
-      <span>.iam a cute role ♡</span>
-      <Typist.Backspace count={30} delay={1500} />
-      <span>.iam a vanity role ♡</span>
-      <Typist.Backspace count={30} delay={1500} />
-      <span>.iam a brave role ♡</span>
-      <Typist.Backspace count={30} delay={1500} />
-      <span>.iam a proud role ♡</span>
-      <Typist.Backspace count={30} delay={1500} />
-      <span>.iam a wonderful role ♡</span>
-      <Typist.Backspace count={30} delay={1500} />
-      <span>.iam a 日本語 role ♡</span>
-      <Typist.Backspace count={30} delay={1500} />
+      { demoRoles.map(({ name }) => [
+        <span>.iam {name}</span>,
+        <Typist.Backspace count={30} delay={1500} />
+      ]) }
       <span>i have too many roles.</span>
     </Typist>
   </TextArea>

ui/config/demo.js

@@ -0,0 +1,8 @@
+export default [
+  'cute',
+  'vanity',
+  'brave',
+  'proud',
+  'wonderful',
+  '日本語'
+].map((name, i, roles) => ({ name: `a ${name} role ♡`, color: `hsl(${(360 / roles.length) * i},40%,70%)` }))