aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/index.tsx11
-rw-r--r--src/lib/Button/Button.tsx18
-rw-r--r--src/lib/index.ts1
3 files changed, 25 insertions, 5 deletions
diff --git a/src/index.tsx b/src/index.tsx
index 0d05155..9d32585 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
-import { makeStyles, Button, Link } from '@material-ui/core';
+import { makeStyles, Link } from '@material-ui/core';
import {
BenzinThemeProvider,
@@ -9,6 +9,7 @@ import {
Window,
ContentSection,
SmartList,
+ Button,
} from './lib';
import icon from './assets/icon.svg';
@@ -48,13 +49,13 @@ const App: React.FC = () => {
</p>
{(index % 2 === 0)?
(
- <Button variant="contained" color="primary">
+ <Button color="primary">
primary
</Button>
)
:
(
- <Button variant="contained" color="secondary">
+ <Button color="secondary">
secondary
</Button>
)
@@ -81,10 +82,10 @@ const App: React.FC = () => {
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. <Link href="#">Phasellus lacus.</Link> Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo.
</p>
- <Button variant="contained" color="secondary">
+ <Button color="secondary">
secondary
</Button>
- <Button variant="contained" color="primary">
+ <Button color="primary">
primary
</Button>
</ContentSection>
diff --git a/src/lib/Button/Button.tsx b/src/lib/Button/Button.tsx
new file mode 100644
index 0000000..6bc0f98
--- /dev/null
+++ b/src/lib/Button/Button.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button as MaterialButton } from '@material-ui/core';
+
+
+interface PropTypes {
+ color: 'primary' | 'secondary';
+}
+
+const Button: React.FC<PropTypes> = ({ color, children }) => (
+ <MaterialButton
+ variant="contained"
+ color={color}
+ children={children}
+ />
+);
+
+
+export default Button;
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 67f9bb4..a41dd39 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -3,3 +3,4 @@ export { default as Header } from './Header/Header';
export { default as ContentSection } from './ContentSection/ContentSection';
export { default as SmartList } from './SmartList/SmartList';
export { default as BenzinThemeProvider } from './BenzinThemeProvider/BenzinThemeProvider';
+export { default as Button } from './Button/Button';