ListView

// ListViewComponent.js
import React from 'react';

function ListViewComponent({ items }) {
  return (
    <ul className="listview image-listview inset">
      {items.map((item, index) => (
        <li key={index}>
          <a href={item.link} className="item">
            {item.icon && (
              <div className={`icon-box bg-${item.color}`}>
                <ion-icon name={item.icon} role="img" className="md hydrated" aria-label={item.icon}></ion-icon>
              </div>
            )}
            <div className="in">
              <div>{item.title}</div>
              {item.subtitle && <span className={item.subtitleClass}>{item.subtitle}</span>}
            </div>
          </a>
        </li>
      ))}
    </ul>
  );
}

export default ListViewComponent;

// YourMainComponent.js
import React from 'react';
import ListViewComponent from './ListViewComponent';

function YourMainComponent() {
  const listViewItems = [
    { title: 'Wallet', icon: 'wallet-outline', color: 'primary', subtitle: '$ 5,503.30', link: '#' },
    { title: 'Cards', color: 'primary', subtitleClass: 'badge badge-primary', subtitle: '2', link: '#' },
    { title: 'Deposit', icon: 'cash-outline', color: 'primary', link: '#' },
  ];

  return (
    <div>
      <ListViewComponent items={listViewItems} />
    </div>
  );
}

export default YourMainComponent;