netmon/views/Card.jsx

const React = require('react');
import { TimeBetweenRows } from './DiffCard';

export const Card = ({ dbdata }) => {
  return dbdata.reverse().map((row, index) => {
    const nextRow = dbdata[index + 1];

    return (
      <div className="grid grid-cols-1 px-2">
        <div
          className={`shadow-md p-1 flex items-center justify-between ${
            row.status === 1 ? 'bg-green-50' : 'bg-red-50'
          }	 `}
        >
          <div className="flex-grow pl-2">{row.timestamp}</div>
          <div className="p-1 pr-2">{row.status === 1 ? '🟢' : '🔴'}</div>
        </div>

        {!!nextRow ? (
          <div className="flex justify-center items-center py-1 text-gray-400">
            <TimeBetweenRows row={row} nextRow={nextRow} />
          </div>
        ) : null}
      </div>
    );
  });
};