// 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;
JavaScript
How To Use
// 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;
JavaScript