Function MarkdownTable

web/components/adapted/Markdown.tsx:134–170

({ headers, rows, className }: MarkdownTableProps)

}

export function MarkdownTable({ headers, rows, className }: MarkdownTableProps) {
  return (
    <div className={cn("overflow-x-auto my-2", className)}>
      <table className="w-full text-xs border-collapse font-mono">
        <thead>
          <tr>
            {headers.map((h, i) => (
              <th
                key={i}
                className="px-2 py-1 text-left border border-surface-700 bg-surface-800 font-semibold text-surface-200"
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, ri) => (
            <tr key={ri}>
              {row.map((cell, ci) => (
                <td
                  key={ci}
                  className={cn(
                    "px-2 py-1 border border-surface-700 text-surface-300",
                    ri % 2 === 1 && "bg-surface-900/40"
                  )}
                >
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}