card list image added

src/components/Settings/Tabs/CardList.jsx

@@ -1,6 +1,8 @@
 import React, {useEffect, useState} from 'react'
-import method1 from "../../../assets/images/payment-method-1.png";
+import method1 from "../../../assets/images/payment-cards/discover-card.svg";
 import LoadingSpinner from '../../Spinners/LoadingSpinner';
+import localImgLoad from '../../../lib/localImgLoad';
+
 import usersService from "../../../services/UsersService";
 import { handlePagingFunc } from '../../Pagination';
 import PaginatedList from '../../Pagination/PaginatedList';
@@ -21,6 +23,7 @@ function CardList() {
 
   useEffect(()=>{
     api.payListCard().then(res=>{
+        console.log('TESTING', res.data?.result_list)
       setCardList({loading: false, data:res.data?.result_list})
     }).catch(err => {
       setCardList({loading: false, data:[]})
@@ -36,34 +39,37 @@ function CardList() {
             </div>
             :
             cardList.data.length ?
-            currentCardList.map(item =>(
+            currentCardList.map(item =>{
-            <li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
+            let image = item.description && localImgLoad(`images/payment-cards/${item.description.toLowerCase()}-card.svg`)
-                <div className="flex space-x-5 mb-2 sm:mb-0">
+            return(
-                    <div className="w-[50px] h-[50px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                <li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
-                    <img className='rounded-full w-full h-full' src={method1} alt="payment" />
+                    <div className="flex space-x-5 mb-2 sm:mb-0">
+                        <div className="w-[70px] h-[70px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                            <img src={image ? image : method1} className='w-[50px] h-[50px]' alt="payment" />
+                        </div>
+                        <div>
+                        <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                            Added: {item.added}
+                        </p>
+                        <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
+                            {item.description} **********{item.digits}
+                        </p>
+                        {/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
+                            Verified
+                        </p> */}
+                        </div>
                     </div>
                     <div>
-                    <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                        <button
-                        Added: {item.added}
+                        type="button"
-                    </p>
+                        className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                    <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
+                        >
-                        {item.description} **********{item.digits}
+                        Delete
-                    </p>
+                        </button>
-                    {/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                        Verified
-                    </p> */}
                     </div>
-                </div>
+                </li>
-                <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"
-                    >
-                    Delete
-                    </button>
-                </div>
-            </li>
-            ))
             :
             <h1 className='font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap'>No Cards Found</h1>
             }

src/components/Settings/Tabs/PaymentMathodsTab.jsx

@@ -12,20 +12,6 @@ export default function PaymentMathodsTab() {
       <div className="payment-method-tab w-full">
         <div className="payment-item-wrapper w-full">
           <CardList />
-          <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>
     </>

src/components/Settings/index.jsx

@@ -58,7 +58,7 @@ export default function Settings({ faq }) {
     {
       id: 2,
       name: "payment",
-      title: "Payment Method",
+      title: "Payment Cards",
       iconName: "bank-card",
     },
     {