🧱 Adds reusable Button and Heading components

src/components/Form/Button.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import { InputSize, applySize } from 'styles/dimensions';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  size?: InputSize,
+  bgColor?: string,
+  fgColor?: string,
+};
+
+const StyledButton = styled.button<ButtonProps>`
+  cursor: pointer;
+  border: none;
+  border-radius: 0.25rem;
+  font-family: PTMono;
+  box-sizing: border-box; 
+  width: -moz-available;
+  box-shadow: 3px 3px 0px ${colors.fgShadowColor};
+  &:hover {
+    box-shadow: 5px 5px 0px ${colors.fgShadowColor};
+  }
+  &:active {
+    box-shadow: -3px -3px 0px ${colors.fgShadowColor};
+  }
+  ${props => applySize(props.size)};
+  ${(props) => props.bgColor ?
+    `background: ${props.bgColor};` : `background: ${colors.primary};`
+  }
+  ${(props) => props.fgColor ?
+    `color: ${props.fgColor};` : `color: ${colors.background};`
+  }
+`;
+
+const Button = (props: ButtonProps): JSX.Element => {
+  const { children, size, bgColor, fgColor, onClick } = props;
+  return (
+    <StyledButton
+      onClick={onClick || (() => null) }
+      size={size}
+      bgColor={bgColor}
+      fgColor={fgColor}
+      >
+      {children}
+    </StyledButton>
+  );
+};
+
+export default Button;