tts-lab TestCard.tsx

0% Statements 0/114

0% Branches 0/1

0% Functions 0/1

0% Lines 0/114

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115

'use client'

import type { ReactNode } from 'react'
import { css } from '../../../../styled-system/css'
import { EventLog } from './EventLog'
import type { LogEntry } from './useTestLog'

export type TestStatus = 'idle' | 'running' | 'pass' | 'fail'

const STATUS_COLORS: Record<TestStatus, string> = {
  idle: '#484f58',
  running: '#58a6ff',
  pass: '#3fb950',
  fail: '#f85149',
}

const STATUS_LABELS: Record<TestStatus, string> = {
  idle: 'Idle',
  running: 'Running',
  pass: 'Pass',
  fail: 'Fail',
}

interface TestCardProps {
  title: string
  description: string
  status: TestStatus
  entries: LogEntry[]
  onClear: () => void
  children: ReactNode
}

export function TestCard({
  title,
  description,
  status,
  entries,
  onClear,
  children,
}: TestCardProps) {
  return (
    <div
      data-component="TestCard"
      className={css({
        backgroundColor: '#161b22',
        border: '1px solid #30363d',
        borderRadius: '8px',
        padding: '16px',
        display: 'flex',
        flexDirection: 'column',
        gap: '12px',
      })}
    >
      <div
        className={css({
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
        })}
      >
        <div>
          <h3
            className={css({
              fontSize: '14px',
              fontWeight: '600',
              color: '#f0f6fc',
              margin: '0',
            })}
          >
            {title}
          </h3>
          <p
            className={css({
              fontSize: '12px',
              color: '#8b949e',
              margin: '4px 0 0',
            })}
          >
            {description}
          </p>
        </div>
        <span
          className={css({
            display: 'inline-flex',
            alignItems: 'center',
            gap: '6px',
            fontSize: '11px',
            fontWeight: '600',
            padding: '2px 8px',
            borderRadius: '12px',
            whiteSpace: 'nowrap',
          })}
          style={{
            color: STATUS_COLORS[status],
            backgroundColor: STATUS_COLORS[status] + '20',
          }}
        >
          <span
            style={{
              width: '6px',
              height: '6px',
              borderRadius: '50%',
              backgroundColor: STATUS_COLORS[status],
              display: 'inline-block',
            }}
          />
          {STATUS_LABELS[status]}
        </span>
      </div>
      <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '8px' })}>{children}</div>
      <EventLog entries={entries} onClear={onClear} />
    </div>
  )
}