feat: add button component (#57)

- Add button component
- Add primary button story

src/components/Button.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Button } from "./Button";
+
+export default {
+ title: "Button",
+};
+
+export const Default: React.FC = () => <Button />;

src/components/Button.styles.ts

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import Button from "@material-ui/core/Button";
+
+interface BaseButtonProps {
+ textcolor?: string | undefined;
+ backgroundcolor?: string | undefined;
+}
+
+export const BaseButton = styled(Button)<BaseButtonProps>`
+ background-color: ${({ backgroundcolor }): string => backgroundcolor || "white"};
+ color: ${({ textcolor }): string => textcolor || "white"};
+ border-radius: 4px;
+ width: 112px;
+ height: 36px;
+`;

src/components/Button.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { ThemeProvider, StylesProvider } from "@material-ui/core/styles";
+import { BaseButton } from "./Button.styles";
+import theme from "../MuiTheme";
+
+export const Button: React.FC = () => (
+ <StylesProvider injectFirst>
+ <ThemeProvider theme={theme}>
+ <BaseButton backgroundcolor={theme.palette.primary.main}>
+ Primary
+ </BaseButton>
+ </ThemeProvider>
+ </StylesProvider>
+);

src/components/index.ts

@@ -3,3 +3,4 @@ export * from "./SignInButton";
 export * from "./Input";
 export * from "./Post";
 export * from "./Filters";
+export * from "./Button";