porter/dashboard/src/components/Button.tsx

import React from 'react';
import styled from "styled-components";

interface Props {
  disabled?: boolean
  children: React.ReactNode
}

const Button = ({children, disabled} : Props) => {
    return <ButtonWrapper disabled={disabled}>{children}</ButtonWrapper>
}

export default Button;

const ButtonWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  cursor: pointer;
  font-family: "Work Sans", sans-serif;
  color: white;
  font-weight: 500;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 5px 8px 0px #00000010;
  cursor: ${(props: { disabled?: boolean }) =>
  props.disabled ? "not-allowed" : "pointer"};

  background: ${(props: { disabled?: boolean }) =>
  props.disabled ? "#aaaabbee" : "#616FEEcc"};
  :hover {
    background: ${(props: { disabled?: boolean }) =>
  props.disabled ? "" : "#505edddd"};
  }

  > i {
    color: white;
    width: 18px;
    height: 18px;
    font-weight: 600;
    font-size: 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    margin-right: 5px;
    justify-content: center;
  }
`;