trimlog-ykonsole-chrome-extension/my-bois/src/components/Misc.jsx

import React from 'react';
import {COLOR_VERY_BAD} from "../helpers/color";

import "./Misc.css";

const Filter = ({bool, children}) => bool ? <>{children}</> : null;

export const StateFilter = ({current, required, children}) => (
  <Filter bool={current === required}>{children}</Filter>
);

export const Warning = ({children}) => (
  <div className="Warning" style={{color: COLOR_VERY_BAD}}>
    {children}
  </div>
);

export const Info = ({children}) => (
  <div className="Info">
    {children}
  </div>
);

export const InfoTable = ({keyValuePairs}) => (
  <Info>
    <table>
      {keyValuePairs.map(({key, value}) => (
        <tr key={key}>
          <td>{key}:</td>
          <td><b>{value}</b></td>
        </tr>
      ))}
    </table>
  </Info>
);