<div
className='container'
style={{
backgroundColor: currentItem.color,
}}
>
<div className='card-list'>
{showingItems.map(({ imgSrc, date, title, name, color, id }, i) => (
<div
key={id}
className='card'
style={{
'--i': i,
}}
>
<div className='card-wrp'>
<div className='card-left'>
<div className='card-icon' style={{ backgroundColor: color }}>
<img
src={imgSrc}
width='72'
height='72'
className='card-emoji'
/>
</div>
</div>
<div className='card-right'>
<p className='card-title'>{title}</p>
<div className='card-info'>
<p className='card-name'>{name}</p>
<div className='card-info-separator'></div>
<p className='card-date'>{date}</p>
</div>
</div>
</div>
</div>
))}
</div>
</div>