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.
38 lines
1.2 KiB
38 lines
1.2 KiB
import React, { useState } from "react"; |
|
import { connect } from "react-redux"; |
|
|
|
function PaymentMethods({ paymentMethods }) { |
|
const [activeMethod, setActiveMactiveMethod] = useState(paymentMethods[0]); |
|
const Method = ({ method }) => { |
|
return ( |
|
<button |
|
className={`flex flex-col border border-solid cursor-not-allowed items-center w-full px-2.5 py-3.5 rounded-md mt-4 relative transition-all duration-500 dark:text-white text-tiny ${ |
|
activeMethod === method |
|
? "bg-blueFD border-blueC0 text-blueC0 bg-opacity-5" |
|
: "bg-grayF9 border-grayDB text-gray70 bg-opacity-5" |
|
}`} |
|
onClick={() => {}} |
|
> |
|
{method.name} |
|
</button> |
|
); |
|
}; |
|
return ( |
|
<section className="mt-8"> |
|
<strong className="font-medium dark:text-white text-base"> |
|
{window.t("انتخاب شیوه پرداخت")} |
|
</strong> |
|
<ul className="list-none p-0 m-0 flex justify-between flex-wrap"> |
|
{paymentMethods.map((method, index) => ( |
|
<Method method={method} key={index} /> |
|
))} |
|
</ul> |
|
</section> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
isDark: state.publicApi.isDark, |
|
}); |
|
|
|
export default connect(mapStateToProps)(PaymentMethods);
|
|
|