sync, too many changes to list out

ui/components/demos/typing.js

@@ -0,0 +1,92 @@
+import * as React from 'react'
+import moment from 'moment'
+import Typist from 'react-typist'
+import styled from 'styled-components'
+
+const Outer = styled.div`
+  --not-quite-black: #23272A;
+  --dark-but-not-black: #2C2F33;
+  --greyple: #99AAB5;
+  --blurple: var(--c-discord);
+
+  background-color: var(--dark-but-not-black);
+  padding: 10px;
+  text-align: left;
+  color: var(--c-white);
+`
+
+const Chat = styled.div`
+  padding: 10px 0;
+  & span {
+    display: inline-block;
+    margin-left: 5px;
+  }
+`
+
+const TextArea = styled.div`
+  background-color: hsla(218,5%,47%,.3);
+  border-radius: 5px;
+  padding: 10px;
+
+  & .Typist .Cursor {
+
+    display: inline-block;
+    color: transparent;
+    border-left: 1px solid var(--c-white);
+    user-select: none;
+
+    &--blinking {
+
+      opacity: 1;
+      animation: blink 2s ease-in-out infinite;
+
+      @keyframes blink {
+        0% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+  }
+`
+
+const Timestamp = styled.span`
+  font-size: 0.7em;
+  color: hsla(0,0%,100%,.2);
+`
+
+const Username = styled.span`
+  font-weight: bold;
+`
+
+const Typing = () => <Outer>
+  <Chat>
+    <Timestamp className='timestamp'>{moment().format('LT')}</Timestamp>
+    <Username className='username'>okano「岡野」</Username>
+    <span className='text'>Hey, I want some roles!</span>
+  </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} />
+      <span>i have too many roles.</span>
+    </Typist>
+  </TextArea>
+</Outer>
+
+export default Typing