refactor: separate Button component

Author: locol23

packages/styled-components/src/components/App.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { color } from '../styles'
 import { Header } from './Header'
+import { Button } from './Button'
 
 const CustomButton: React.FC = ({ children }) => <button onClick={() => alert('CustomButton')}>{children}</button>
 
@@ -24,13 +25,6 @@ const Container = styled.div({
   justifyContent: 'center',
 })
 
-const Button = styled.button`
-  border: solid 1px ${color.primary};
-  width: 100px;
-  height: 30px;
-  margin: 0 20px;
-`
-
 type StyleMap = {
   [key: string]: () => string
 }
@@ -60,4 +54,3 @@ const StyleObjectsStyledButton = styled(Button)<StyleButtonProps>(
   },
   (props) => (props.styleType ? styleMap[props.styleType]() : styleMap.default())
 )
-

packages/styled-components/src/components/Button.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import { color } from '../styles'
+
+export const Button = styled.button`
+  border: solid 1px ${color.primary};
+  width: 100px;
+  height: 30px;
+  margin: 0 20px;
+`
+
+// Style Objects
+const StyleObjectsButton = styled.button({
+  border: `solid 1px ${color.primary}`,
+  width: 100,
+  height: 30,
+  margin: '0 20px',
+})
+