denoTestTsx.tsx

import { React, window } from "https://deno.land/x/tsx_static@2.0.3/mod.ts";

export type Cycle = {
  id: string;
  durations?: Record<string, number>;
};

const Box = <div></div>;
const DetailItem = <div></div>;

function renderDetails(cycle: Cycle): any {
  const bla = Object.entries(cycle.durations);
  console.log(bla);

  return Object.entries(cycle.durations)
    .map(([key, value], idx) => {
      // console.log(key, value);
      return (<DetailItem key={key}>
        <Box className={key.toUpperCase() === "DELAY" ? "isDelay" : ""}>{key}</Box>
        <Box>{value}</Box>
      </DetailItem>);
    })
}

const data1: Cycle = {
  id: "id1", durations: { "Delay": 100, "NotDelay": 0 },
}

const fragment = renderDetails(data1);
console.log(JSON.stringify(fragment, null, 2))