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
`;