WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
Olu Amey
2023-01-16 13:09:45 -05:00
commit a6ebce376c
271 changed files with 39454 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Settings/Tabs/PaymentMathodsTab.jsx
+136
View File
@@ -0,0 +1,136 @@
import React from "react";
import method1 from "../../../assets/images/payment-method-1.png";
import method2 from "../../../assets/images/payment-method-2.png";
import method3 from "../../../assets/images/payment-method-3.png";
import method4 from "../../../assets/images/payment-method-4.png";
export default function PaymentMathodsTab() {
return (
<>
<div className="payment-method-tab w-full">
<div className="payment-item-wrapper w-full">
<ul className="payment-items">
<li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
<div className="flex space-x-5 mb-3 sm:mb-0">
<div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
<img src={method1} alt="payment" />
</div>
<div>
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
Datch Bangla Bank Ltd
</p>
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
Bank **********5535
</p>
<p className="sm:text-18 text-sm tracking-wide text-light-green">
Verified
</p>
</div>
</div>
<div>
<button
type="button"
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
>
Manage
</button>
</div>
</li>
<li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
<div className="flex space-x-5 mb-3 sm:mb-0">
<div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
<img src={method2} alt="payment" />
</div>
<div>
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
Master Card
</p>
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
Bank **********5535
</p>
<p className="sm:text-18 text-sm tracking-wide text-light-green">
Verified
</p>
</div>
</div>
<div>
<button
type="button"
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
>
Manage
</button>
</div>
</li>
<li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
<div className="flex space-x-5 mb-3 sm:mb-0">
<div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
<img src={method3} alt="payment" />
</div>
<div>
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
Paypal Account
</p>
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
Bank **********5535
</p>
<p className="sm:text-18 text-sm tracking-wide text-light-green">
Verified
</p>
</div>
</div>
<div>
<button
type="button"
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
>
Manage
</button>
</div>
</li>
<li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
<div className="flex space-x-5 mb-3 sm:mb-0">
<div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
<img src={method4} alt="payment" />
</div>
<div>
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
Visa Card
</p>
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
Bank **********5535
</p>
<p className="text-18 tracking-wide text-light-red">
Unverified
</p>
</div>
</div>
<div>
<button
type="button"
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
>
Manage
</button>
</div>
</li>
</ul>
<div className="py-7 flex space-x-4">
<button
type="button"
className="btn-shine text-white text-18 bg-pink tracking-wide px-4 py-3 rounded-full"
>
Add Bank
</button>
<button
type="button"
className="text-white text-18 bg-light-green tracking-wide px-4 py-3 rounded-full"
>
Add Card
</button>
</div>
</div>
</div>
</>
);
}