import*as e from"react";import l,{css as r}from"styled-components";import{getReadableDate as i}from"./getReadableDate";import s from"./LogStatusCode";function c(o){const{log:t,active:a,onClick:n}=o;return e.createElement(m,{active:a,onClick:()=>n(t)},e.createElement("span",null,e.createElement(s,{statusCode:t.statusCode.toString()})),e.createElement("span",null,t.method),e.createElement("span",null,t.path),e.createElement("span",null,i(t.timestamp)))}const m=l.div`
  display: grid;
  grid-template-columns: auto 2fr 6fr 3fr;
  align-items: center;
  font-size: var(--font-size-base);
  cursor: pointer;

  > * {
    padding: var(--spacing-base);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color-primary);
  }

  ${({active:o})=>o?r`
          background-color: var(--logs-active-row-background-color, var(--wide-tile-bg-color));
        `:r`
          &:hover {
            background-color: rgba(255, 255, 255, 0.5);
          }
        `};
`;export{c as default};
