Blueprint.jsx

import React from "react";
import { Card, Elevation, HTMLTable } from "@blueprintjs/core";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
import "@blueprintjs/core/lib/css/blueprint.css";


const App = () => {
  const testData = [
    {
      build_id: "3423847",
      test_name: "Login Test",
      status: "pass",
      duration: "25s",
    },
    {
      build_id: "3423846",
      test_name: "Checkout Test",
      status: "fail",
      duration: "37s",
    },
    {
      build_id: "3423845",
      test_name: "Product Page Test",
      status: "pass",
      duration: "42s",
    },
    {
      build_id: "3423844",
      test_name: "Homepage Test",
      status: "pass",
      duration: "18s",
    },
    {
      build_id: "3423843",
      test_name: "Search Test",
      status: "pass",
      duration: "31s",
    },
  ];


  return (
    <Card
      elevation={Elevation.THREE}
      style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
    >
      <h1>LambdaTest Automation Test Results</h1>
      <p>
        This is a sample application that shows how to integrate LambdaTest with
        ReactJS.
      </p>
      <HTMLTable bordered={true} striped={true} responsive={true}>
        <thead>
          <tr>
            <th>Build ID</th>
            <th>Test Name</th>
            <th>Status</th>
            <th>Duration</th>
          </tr>
        </thead>
        <tbody>
          {testData.map((test, index) => (
            <tr key={test.build_id}>
              <td>{test.build_id}</td>
              <td>{test.test_name}</td>
              <td>{test.status}</td>
              <td>{test.duration}</td>
            </tr>
          ))}
        </tbody>
      </HTMLTable>
    </Card>
  );
};


export default App;