74 lines
1.8 KiB
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);
|
|
|