import React, { useState } from "react"; import { LatestRun } from "../../lib/types"; import tw from "tailwind-styled-components"; const RecursiveDropdown: React.FC<{ data: any; skipKeys: string[] }> = ({ data, skipKeys, }) => { if (typeof data !== "object" || data === null) { return null; } return ( <> {Object.entries(data).map(([key, value]) => { if (skipKeys.includes(key)) { return null; } // Special case for 'category' key if (key === "category" && Array.isArray(value)) { return (
{value.join(", ")}
); } if (typeof value === "object" && value !== null) { return ( {key} ); } else { return (
{typeof value === "string" ? value : JSON.stringify(value)}
); } })} ); }; const RunData: React.FC<{ latestRun: LatestRun }> = ({ latestRun }) => { const date = new Date(latestRun.benchmark_start_time); return (
{latestRun.command}
{date.toLocaleString()}
{latestRun.metrics.run_time}
{latestRun.metrics.highest_difficulty.split(":")[1]?.slice(-1)}
{Object.keys(latestRun.tests).map((testKey) => ( {testKey} {latestRun.tests[testKey] && ( )} ))}
); }; export default RunData; const Card = tw.div` bg-white p-4 rounded shadow-lg w-full mt-4 `; const Section = tw.div` mt-2 `; const Label = tw.span` font-medium `; const Data = tw.span` ml-1 `; const Dropdown = tw.details` mt-4 `; const DropdownSummary = tw.summary` cursor-pointer text-blue-500 `; const DropdownContent = tw.div` pl-4 mt-2 `;