add basic styles for button component

Author: arximughal

src/components/Button.module.scss

@@ -0,0 +1,33 @@
+@import "../theme/colors.scss";
+
+.button {
+  background: $theme-link-color;
+  position: relative;
+  padding: 8px 20px;
+  border-top: 0px;
+  border-left: 0px;
+  border-right: 0px;
+  border-bottom: 6px solid $theme-link-color-dark;
+  color: white;
+  font-size: 16px;
+  font-family: Lucida Sans Unicode, sans-serif;
+  vertical-align: middle;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0px 1px 6px 1px #999999;
+  box-shadow: 0px 1px 6px 1px #999999;
+  transition: all 0.1s;
+  &:hover {
+    top: -1px;
+    border-bottom: 7px solid $theme-link-color-dark;
+    background: $theme-link-color;
+  }
+  &:active {
+    top: 2px;
+    border-bottom: 4px solid $theme-link-color-dark;
+    background: $theme-link-color-dark;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+}

src/components/Button.tsx

@@ -1,18 +1,19 @@
 import React from "react";
+import styles from "./Button.module.scss";
 
 // Define an interface for the props of the button component
 interface ButtonProps {
-  text: string; // The text to display on the button
   onClick: () => void; // The handler function for the click event
   disabled?: boolean; // An optional prop to disable the button
+  children: React.ReactNode;
 }
 
 // Define a custom button component that renders a button element
-const Button: React.FC<ButtonProps> = ({ text, onClick, disabled }) => {
+const Button: React.FC<ButtonProps> = ({ onClick, disabled, children }) => {
   // Return the JSX element for the button component
   return (
-    <button onClick={onClick} disabled={disabled}>
-      {text}
+    <button className={styles.button} onClick={onClick} disabled={disabled}>
+      {children}
     </button>
   );
 };

src/features/counter/Counter.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../app/rootReducer";
 import { increment, decrement, incrementByAmount } from "./counterSlice";
+import Button from "../../components/Button";
 
 // Define a counter component that uses the redux state and actions
 const Counter: React.FC = () => {
@@ -48,10 +49,10 @@ const Counter: React.FC = () => {
     <div>
       <h1>Counter</h1>
       <p>The current counter value is {counter}</p>
-      <button onClick={handleIncrement}>Increment</button>
-      <button onClick={handleDecrement}>Decrement</button>
+      <Button onClick={handleIncrement}>Increment</Button>
+      <Button onClick={handleDecrement}>Decrement</Button>
       <input value={incrementAmount} onChange={handleIncrementAmountChange} />
-      <button onClick={handleIncrementByAmount}>Increment by amount</button>
+      <Button onClick={handleIncrementByAmount}>Increment by amount</Button>
     </div>
   );
 };

src/theme/colors.scss

@@ -1 +1,3 @@
-$theme-link-color: #ff5733;
+$theme-link-color: #ff5733;
+$theme-link-color-dark: #fe3e13;
+$white: #ffffff;