const { headers, data, config, noDivider } = props; if (!headers || !data) { return null; } const THead = styled.div` display: grid; grid-template-columns: repeat(6, 1fr); color: var(--agg-primary-color, #777790); font-size: 14px; font-weight: normal; div { padding: 10px 8px; font-size: 16px; font-weight: normal; color: #6f6f6f; } `; const TBody = styled.div` .list { display: grid; grid-template-columns: repeat(6, 1fr); height: 84px; border: 1px solid #f0f0f0; border-radius: 10px; margin-bottom: 10px; } .item { display: flex; align-items: center; padding: 0 20px; } `; const CardsList = styled.div` margin-top: 20px; width: 100%; `; return ( <> <CardsList> <div> <THead> {headers.map((header, idx) => ( <div key={idx}>{header}</div> ))} </THead> <TBody> {data.map((rows, idx) => ( <div className="list" key={idx}> {rows.map((data, idx) => ( <div className="item" key={idx}> {data} </div> ))} </div> ))} </TBody> </div> </CardsList> </> );