absolutely massive typescript porting time

packages/roleypoly-ui/pages/index.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import redirect from '../util/redirect'
+// import Link from 'next/link'
+// import Head from '../components/head'
+// import Nav from '../components/nav'
+import TypingDemo from '../components/demos/typing'
+import TapDemo from '../components/demos/tap'
+import styled from 'styled-components'
+import { md } from '../kit/media'
+
+const HeroBig = styled.h1`
+  color: var(--c-7);
+  font-size: 1.8em;
+`
+
+const HeroSmol = styled.h1`
+  color: var(--c-5);
+  font-size: 1.1em;
+`
+
+const Hero = styled.div`
+  padding: 2em 0;
+  text-align: center;
+`
+
+const Footer = styled.p`
+  text-align: center;
+  font-size: 0.7em;
+  opacity: 0.3;
+  transition: opacity 0.3s ease-in-out;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    opacity: 1;
+  }
+`
+
+const FooterLink = styled.a`
+  font-style: none;
+  color: var(--c-7);
+  text-decoration: none;
+  transition: color 0.3s ease-in-out;
+
+  &:hover {
+    color: var(--c-5);
+  }
+`
+
+const DemoArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${md`flex-direction: row;`}
+
+  & > div {
+    flex: 1;
+    padding: 10px;
+  }
+
+  & > div > p {
+    text-align: center;
+  }
+`
+
+const Wrapper = styled.div`
+  flex-wrap: wrap;
+  ${md`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
+    min-height: 500px;
+  `}
+`
+
+export default class Home extends React.Component {
+  static async getInitialProps (ctx, rpc) {
+    if (ctx.user != null) {
+      redirect(ctx, '/s/add')
+    }
+
+    ctx.layout.noBackground = true
+  }
+
+  render () {
+    return <div>
+      <Wrapper>
+        <div>
+          <Hero>
+            <HeroBig>Discord roles for humans.</HeroBig>
+            <HeroSmol>Ditch bot commands once and for all.</HeroSmol>
+          </Hero>
+          <DemoArea>
+            <div>
+              <TypingDemo />
+              <p>What is this? 2005?</p>
+            </div>
+            <div>
+              <TapDemo />
+              <p>Just click or tap.</p>
+            </div>
+          </DemoArea>
+        </div>
+      </Wrapper>
+      <Footer>
+        © {new Date().getFullYear()}<br />
+        Made with ♡&nbsp;
+        <img src='/static/flags.svg' style={{ height: '1em', opacity: 0.5 }} /><br />
+        <FooterLink target='_blank' href='https://ko-fi.com/roleypoly'>Ko-Fi</FooterLink>&nbsp;-&nbsp;
+        <FooterLink target='_blank' href='https://github.com/kayteh/roleypoly'>GitHub</FooterLink>&nbsp;-&nbsp;
+        <FooterLink target='_blank' href='https://discord.gg/PWQUVsd'>Discord</FooterLink>
+      </Footer>
+    </div>
+  }
+}