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 = () => {
  return (
    <div>
      <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="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 ">
              اطلاعات بیشتر
            </button>
            <br />
            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
              اطلاعات بیشتر
            </button>
            <br />
            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded-full px-6 py-2 my-2">
              اطلاعات بیشتر
            </button>
            <br />
            <button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
              Hover ME
            </button>
            <br />
            <button className="flex items-center bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
              اطلاعات بیشتر
              <img src={whiteLeftArrow} alt="" className="w-4 mr-1" />
            </button>
          </div>
          <div>
            <button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded px-6 py-2 my-2">
              اطلاعات بیشتر
            </button>
            <br />
            <button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
              اطلاعات بیشتر
            </button>
            <br />
            <button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
              اطلاعات بیشتر
              <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
            </button>
            <button className="flex items-center  text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
              اطلاعات بیشتر
              <img src={greenLeftArrow} alt="" className="w-4 mr-1" />
            </button>
            <button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
              اطلاعات بیشتر
              <span className="bg-darkGreenBg rounded-full p-2 mr-2">
                <img src={whiteLeftArrow} alt="" className="w-4" />
              </span>
            </button>
          </div>
          <div>
            <button className="bg-midGrayBgColor text-cancleButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
              لغو کردن
            </button>
            <br />
            <button className="bg-midGrayBgColor p-4 rounded-md">
              <img src={blackRightArrow} alt="" className="w-4" />
            </button>
            <button className="bg-midGrayBgColor p-4 rounded-md mr-2">
              <img src={blackLeftArrow} alt="" className="w-4" />
            </button>
            <br />
            <button className="bg-darkGreenBg p-4 rounded-md my-2">
              <img src={whiteRightArrow} alt="" className="w-4" />
            </button>
            <button className="bg-darkGreenBg p-4 rounded-md mr-2">
              <img src={whiteLeftArrow} alt="" className="w-4" />
            </button>
            <br />
            <button className="bg-midGrayBgColor p-4 rounded-md">
              <img src={blackUpwardArrow} alt="" className="w-4" />
            </button>
            <button className="bg-midGrayBgColor p-4 rounded-md mr-2">
              <img src={blackDownwardArrow} alt="" className="w-4" />
            </button>
            <br />
            <button className="bg-darkGreenBg p-4 rounded-full my-2">
              <img src={whiteUpwardArrow} alt="" className="w-4 h-4" />
            </button>
            <button className="bg-darkGreenBg p-4 rounded-full mr-2">
              <img src={whiteDownwardArrow} alt="" className="w-4 h-4" />
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default ButtonDesign;