35 lines
1.2 KiB
React
35 lines
1.2 KiB
React
import React from 'react';
|
|
import './CardList.css';
|
|
|
|
export default function CardList({ items = [], cols = 3, onAction }) {
|
|
return (
|
|
<div className="aa-cardlist" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
|
|
{items.map((it, i) => (
|
|
<div className="aa-cardlist-item" key={i}>
|
|
<div className="aa-card-cover">{it.emoji || '📄'}</div>
|
|
<div className="aa-card-body">
|
|
<div className="aa-card-title">{it.title}</div>
|
|
<div className="aa-card-desc">{it.desc}</div>
|
|
{it.tags && it.tags.length ? (
|
|
<div className="aa-card-tags">
|
|
{it.tags.map((t, ti) => (
|
|
<span className="aa-card-tag" key={ti}>{t}</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{it.actions && it.actions.length ? (
|
|
<div className="aa-card-actions">
|
|
{it.actions.map((a, ai) => (
|
|
<button key={ai} onClick={() => onAction && onAction({ item: it, action: a })}>
|
|
{a}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|