danovinTasks/src/components/counterDesign/CounterDesign.js

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

import blackDisLikeIcon from "../../assets/icons/black-dislike-icon.svg";
import blackLikeIcon from "../../assets/icons/black-like-icon.svg";
import decrementCounterIcon from "../../assets/icons/decrement-counter-icon.svg";
import incrementCounterIcon from "../../assets/icons/increment-counter-icon.svg";

// {deliveryIcon && (
//   <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
// )}

const CounterDesign = ({
  counterColor,
  counterIncreaseBtn,
  counterDecreaseBtn,
  likeBtn,
}) => {
  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 mb-6">
        <h2 className="text-base bg-blue-300 rounded-full shadow-md shadow-blue-900 text-white p-2">
          طراحی کانتر
        </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">
            counterDesign
          </span>
          است.
        </p>
      </div>
      <div className="flex flex-col items-center justify-center">
        {likeBtn && (
          <div className="flex items-center">
            <img src={blackLikeIcon} alt="" className="w-8 mb-4" />
            <img src={blackDisLikeIcon} alt="" className="w-8 mb-4" />
          </div>
        )}
        {counterIncreaseBtn && (
          <img src={incrementCounterIcon} alt="" className="w-8 mb-4" />
        )}
        <p
          className={` text-sm sm:text-base md:text-2xl font-bold ${counterColor}  `}
        >
          561
        </p>
        {counterDecreaseBtn && (
          <img src={decrementCounterIcon} alt="" className="w-8 mt-4" />
        )}
      </div>
    </section>
  );
};

export default CounterDesign;

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

CounterDesign.defaultProps = {
  counterColor: "text-darkRedTextColor",
  // for icons
  likeBtn: true,
  counterIncreaseBtn: false,
  counterDecreaseBtn: false,
};