button

Author: Prafful Kumar

Diff for: package.json

@@ -13,6 +13,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.2.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
@@ -39,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.7"
   }
 }

Diff for: src/App.css

@@ -1,26 +1,26 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import Button from "./components/Button";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+    return (
+        <div
+            style={{
+                background: 'rgb(126 126 126)',
+                height: '100vh',
+                padding: '20px',
+            }}
         >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+            <Button
+                // background="#fff"
+                // color="#000"
+                // borderColor="#000"
+                // outline
+                round
+                raise
+            >
+                Click me please
+            </Button>
+        </div>
+    );
 }
 
 export default App;

Diff for: src/App.test.tsx

@@ -0,0 +1,63 @@
+import styled, { CSSObject, CSSProperties } from 'styled-components';
+
+type Props = {
+    children: React.ReactNode,
+    background?: string,
+    color?: string,
+    borderColor?: string,
+    uppercase?: Boolean,
+    round?: Boolean,
+    outline?: Boolean,
+    raise?: Boolean,
+}
+
+function Button({
+    children,
+    background,
+    color,
+    borderColor,
+    uppercase,
+    round,
+    outline,
+    raise,
+    ...props
+}: Props) {
+
+    const StyledButton = styled.button`
+        background: ${outline ? 'transparent' : background || 'blue'};
+        border: ${borderColor || outline ? '1px solid ' + borderColor || background : 'none'};
+        color: ${outline ? color || background : color || '#fff'};
+        font-size: 14px;
+        border-radius: ${round ? '20px' : '5px'};
+        font-weight: 600;
+        
+        line-height: 15px;
+        padding: 10px;
+
+        letter-spacing: 0.3px;
+        text-transform: ${uppercase ? 'uppercase' : ''};
+        cursor: pointer;
+
+        &:focus{
+            outline: none;
+        }
+        &:active, {
+            outline: none;
+            box-shadow: 0 3px 0 rgb(9 30 66 / 10%);
+            top: 3px;
+        }
+        &:hover{
+            box-shadow: 0 3px 5px rgb(9 30 66 / 10%), 0 0 1px rgb(9 30 66 / 31%);
+            transform: ${raise ? 'translate3d(0px, -2px, 0px)' : 'none'};
+}
+`
+
+    return (
+        <StyledButton
+            {...props}
+        >
+            {children}
+        </StyledButton>
+    )
+}
+export default Button;

Diff for: src/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';