footer, etc

src/components/CodeBlocks/SliderInput.tsx

@@ -37,4 +37,5 @@ const SliderContainer = styled.div`
 
 const SliderAndInput = styled.div`
   display: flex;
+  margin: 3px 0;
 `;

src/components/LinkOut.tsx

@@ -0,0 +1,8 @@
+interface ILinkOut {
+  href: string;
+}
+export const LinkOut: React.FC<ILinkOut> = ({ href = '#', children, ...rest }) => (
+  <a {...rest} href={href} target="_blank" rel="noreferrer noopener">
+    {children}
+  </a>
+);

src/pages/index.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { SvgControls, CssControls, FilterControls } from '~/components/CodeBlocks';
 import Output from '~/components/CodeBlocks/Output';
+import { LinkOut } from '~/components/LinkOut';
 import { Row, LeftCol, Space, RightCol } from '~/components/layout';
-
 const IndexPage = () => {
   return (
     <Container>
@@ -20,6 +20,13 @@ const IndexPage = () => {
             <CssControls />
             <FilterControls />
             <Space h={60} />
+            <hr />
+            <footer>
+              By <LinkOut href="https://twitter.com/jimmmy">@jimmmy</LinkOut>
+              <br />
+              View <LinkOut href="https://github.com/cjimmy/grainy-gradients">Github repo</LinkOut>
+            </footer>
+            <Space h={60} />
           </Scroll>
         </LeftCol>
         <RightCol>