Improving image open time (#185)

* Moving intro into its own component

* Tidying JSX, and allowing image to render before first compression. Fixes #164.

src/components/intro/index.tsx

@@ -0,0 +1,27 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+import { bind } from '../../lib/util';
+
+interface Props {
+  onFile: (file: File) => void;
+}
+interface State {}
+
+export default class Intro extends Component<Props, State> {
+  @bind
+  onFileChange(event: Event): void {
+    const fileInput = event.target as HTMLInputElement;
+    const file = fileInput.files && fileInput.files[0];
+    if (!file) return;
+    this.props.onFile(file);
+  }
+
+  render({ }: Props, { }: State) {
+    return (
+      <div class={style.welcome}>
+        <h1>Drop, paste or select an image</h1>
+        <input type="file" onChange={this.onFileChange} />
+      </div>
+    );
+  }
+}

src/components/intro/style.scss

@@ -0,0 +1,22 @@
+.welcome {
+  margin: auto;
+  text-align: center;
+
+  h1 {
+    font-weight: inherit;
+    font-size: 150%;
+    text-align: center;
+  }
+
+  input {
+    display: inline-block;
+    width: 16em;
+    padding: 10px;
+    margin: 0 auto;
+    -webkit-appearance: none;
+    border: 1px solid var(--button-fg);
+    background: rgba(var(--button-fg-color), 0.1);
+    border-radius: 3px;
+    cursor: pointer;
+  }
+}