Refactor Button to use styled components

Author: devklick

src/components/Button/Button.scss

@@ -1,4 +1,4 @@
-import "./Button.scss";
+import { StyledButton } from "./styles";
 
 interface ButtonProps {
   name: string;
@@ -8,9 +8,9 @@ interface ButtonProps {
 
 function Button({ name, width = "100%", onClick }: ButtonProps) {
   return (
-    <button style={{ width }} onClick={onClick}>
+    <StyledButton width={width} onClick={onClick}>
       {name}
-    </button>
+    </StyledButton>
   );
 }
 export default Button;

src/components/Button/Button.tsx

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const StyledButton = styled.button<{ width: string | number }>`
+  width: ${(props) =>
+    typeof props.width === "string" ? props.width : `${props.width}px`};
+`;