VibeCoderzVibeCoderz
Telegram
All Prompts
Test Execution Table preview
tabledatatestingexecutionstatusresponsivemodern

Test Execution Table

Таблица результатов тестов: ID запуска, наборы, длительность, статус. Адаптивный, современный UI-компонент для отображения данных.

Prompt

<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
  <div class="font-inter">
    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
      <h3 class="text-lg font-semibold text-gray-900">Recent test executions</h3>
      <div class="flex space-x-2">
        <button class="text-sm bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-colors">Rerun</button>
        <button class="text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded hover:bg-gray-200 transition-colors">Export CSV</button>
        <button class="text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded hover:bg-gray-200 transition-colors">Download PDF</button>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-gray-50 border-b border-gray-200">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Run ID</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Suite</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Started</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RUN-2481</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Checkout E2E</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12m 45s</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Passed</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mar 12</td>
          </tr>
          <tr class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RUN-2482</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Auth API</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3m 10s</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mar 20</td>
          </tr>
          <tr class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RUN-2483</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Notifications</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5m 22s</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Failed</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mar 05</td>
          </tr>
          <tr class="hover:bg-gray-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RUN-2484</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Billing Web</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9m 01s</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800">Warning</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mar 29</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
All Prompts