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
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);
|
|
|