netmon/views/Card.jsx

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

export const Card = ({ dbdata }) => {
  return dbdata.reverse().map((row, index) => {
    const nextRow = dbdata[index + 1];
    const lastRow = dbdata.slice()[0];
    const textStyles = 'flex justify-center items-center py-2 text-sm';

    return (
      <div className="grid grid-cols-1 px-2">
        {row.id === lastRow.id ? (
          <div
            className={`${textStyles} ${
              row.status === 1 ? 'text-green-600' : 'text-red-600'
            }`}
          >
            {row.status === 1 ? 'yeh all good for ' : 'absolutely cooked for '}
            <TimeDiff row={row} nextRow={lastRow} />
          </div>
        ) : null}

        <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={`${textStyles}	${
              row.status === 0 ? 'text-green-600' : 'text-red-600'
            }`}
          >
            <TimeDiff row={row} nextRow={nextRow} />
          </div>
        ) : null}
      </div>
    );
  });
};