danovinTasks/src/components/buttonDesign/ButtonDesign.js

import React from "react";
import "./ButtonDesign.scss";

import greenLeftArrow from "../../assets/icons/green-left-arrow.svg";

import whiteLeftArrow from "../../assets/icons/white-left-arrow.svg";
import whiteRightArrow from "../../assets/icons/white-right-arrow.svg";
import whiteUpwardArrow from "../../assets/icons/white-upward-arrow.svg";
import whiteDownwardArrow from "../../assets/icons/white-downward-arrow.svg";

import blackRightArrow from "../../assets/icons/black-right-arrow.svg";
import blackLeftArrow from "../../assets/icons/black-left-arrow.svg";
import blackUpwardArrow from "../../assets/icons/black-upward-arrow.png";
import blackDownwardArrow from "../../assets/icons/black-downward-arrow.png";

const ButtonDesign = ({
  buttonBgColor,
  circleArrowBgClr,
  buttonTextColor,
  buttonBorder,
  buttonBorderColor,
  buttonBorderRadius,
  buttonPaddingX,
  buttonPaddingY,
  imageMarginRight,
  imageWidth,
  imageHeight,
  // icons
  leftArrowWhite,
  rightArrowWhite,
  upwardArrowWhite,
  downwardArrowWhite,
  leftArrowBlack,
  rightArrowBlack,
  upwardArrowBlack,
  downwardArrowBlack,
  buttonBgHoverColor,
  circleArrow,
}) => {
  return (
    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
      <div className="flex items-center justify-between">
        <h2 className="text-lg text-black">طراحی دکمه های سایت</h2>
      </div>
      <div className="my-4">
        <p className="leading-10">
          نام این کامپوننت
          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
            buttonDesign
          </span>
          است.
        </p>
      </div>
      {/* Button UI Design */}
      <div className="flex flex-wrap justify-around items-center">
        <div>
          <button
            className={`flex items-center text-sm md:text-base transiton duration-200 hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
          >
            اطلاعات بیشتر
            {leftArrowWhite && (
              <img
                src={whiteLeftArrow}
                alt=""
                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
              />
            )}
            {rightArrowWhite && (
              <img
                src={whiteRightArrow}
                alt=""
                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
              />
            )}
            {upwardArrowWhite && (
              <img
                src={whiteUpwardArrow}
                alt=""
                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
              />
            )}
            {downwardArrowWhite && (
              <img
                src={whiteDownwardArrow}
                alt=""
                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
              />
            )}
            {leftArrowBlack && (
              <img
                src={blackLeftArrow}
                alt=""
                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
              />
            )}
            {rightArrowBlack && (
              <img
                src={blackRightArrow}
                alt=""
                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
              />
            )}
            {upwardArrowBlack && (
              <img
                src={blackUpwardArrow}
                alt=""
                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
              />
            )}
            {downwardArrowBlack && (
              <img
                src={blackDownwardArrow}
                alt=""
                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
              />
            )}
            {circleArrow && (
              <span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}>
                <img src={whiteLeftArrow} alt="" className="w-4" />
              </span>
            )}
          </button>
        </div>
      </div>
    </section>
  );
};

export default ButtonDesign;

// color classes that i defined in tailwind.config.js and we can use for text color:
// ----> text-grayTextColor
// ----> text-white

// color classes that i defined in tailwind.config.js and we can use for background color:
// ----> bg-darkGreenBg
// ----> bg-midGrayBgColor

// color classes that i defined in tailwind.config.js and we can use for border color:
// ----> border-lightBlueBorderColor

ButtonDesign.defaultProps = {
  buttonBgColor: "bg-darkGreenBg",
  buttonBgHoverColor: "bg-greenBookBg",
  circleArrowBgClr: "bg-darkGreenBg",
  buttonTextColor: "text-white",
  buttonBorder: "border-b-4",
  buttonBorderColor: "border-lightBlueBorderColor",
  buttonBorderRadius: "rounded",
  buttonPaddingX: "px-6",
  buttonPaddingY: "py-4",
  imageMarginRight: "mr-2",
  imageWidth: "w-4",
  imageHeight: "h-4",
  // icons
  leftArrowWhite: true,
  rightArrowWhite: false,
  upwardArrowWhite: false,
  downwardArrowWhite: false,
  leftArrowBlack: false,
  rightArrowBlack: false,
  upwardArrowBlack: false,
  downwardArrowBlack: false,
  circleArrow: false,
};