You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

52 lines
1.6 KiB

import React from "react";
import { connect } from "react-redux";
export const ButtonBetween = ({ item, status, onClick, width, active, toggle }) => {
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" }}
>
<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" }}
>
<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);