74 lines
1.8 KiB

import React from "react";
import { connect } from "react-redux";
//components
import Loading from "../Loading";
export const ButtonBetween = ({
item,
status,
onClick,
width,
active,
toggle,
loading,
}) => {
return toggle ? (
<button
className={`flex justify-between items-center ${
active ? "bg-green-50 border-green-500" : "bg-gray-50 border-gray-400"
} bg-opacity-80 rounded-sm border-2 border-solid`}
onClick={() => onClick()}
style={{ width, padding: "18px 8px" }}
>
{loading ? (
<Loading size={2} color="bg-green-500" />
) : (
<strong
className={`text-tiny ${
active ? "text-green-700" : "text-gray-700"
} font-semibold`}
>
{item}
</strong>
)}
{status && (
<span
className={`pr-3 border-r border-solid ${
active
? "border-green-600 text-green-700"
: "border-gray-400 text-gray-500"
} text-tiny font-semibold`}
>
{status}
</span>
)}
</button>
) : (
<button
className={`flex justify-between items-center bg-green-50 bg-opacity-80 rounded-sm border-2 border-solid border-green-500`}
onClick={() => onClick()}
style={{ width, padding: "18px 8px" }}
>
{loading ? (
<Loading size={2} color="bg-green-500" />
) : (
<strong className="text-tiny text-green-700 font-semibold">
{item}
</strong>
)}
{status && (
<span className="pr-3 border-r border-solid border-green-600 text-tiny text-green-700 font-semibold">
{status}
</span>
)}
</button>
);
};
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(ButtonBetween);