JSFiddle - React, Tailwind, and code Playground

by Lena R

JavaScript

import React from "react";
import styled from "styled-components";
import {SyncLoader} from "react-spinners";

const Button = styled.button`
  width: 40px;
  height: 40px;
  background: #ffffff;
  box-shadow: 4px 2px 6px rgba(72, 100, 125, 0.3),
    inset -2px -2px 6px rgba(72, 100, 125, 0.1);
  border-radius: 10px;
  margin-right: 20px;
  border: none;
  outline: none;
  color: #ea5959;
  cursor: pointer;
  border-radius: 10px;
  &.ButtonPress {
   background: #e3edf7;
   opacity: 0.6;
   box-shadow: inset 4px 2px 6px rgba(72, 100, 125, 0.3),
    inset -6px -3px 6px #ffffff;    
  }
  &.ButtonUnpress {
    background: #ffffff;
    box-shadow: 4px 2px 6px rgba(72, 100, 125, 0.3),
    inset -2px -2px 6px rgba(72, 100, 125, 0.1);
    border-radius: 10px;
  }
`;

const Wrapper = styled.div`
  display: flex;
  align-items: center;
`;

const H4 = styled.h4`
  font-weight: 500;
  font-size: 18px;
`;

export default function GenericActionButton(props) {
  this.state = {isToggleOn: true};
  const { loading, icon, text, handleClick } = props;

  handleClick(props) {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }
  return (
    <Wrapper>
      {loading ? (
        <Button disabled>
          <SyncLoader size={10} color="white"></SyncLoader>
        </Button>
      ) : (
        <Button onClick={handleClick} className={isToggleOn ? "ButtonPress" : "ButtonUnpress"}>{icon}</Button>
      )}
      <H4>{text}</H4>
    </Wrapper>
  );
}