Add table with markdown

src/back/jdd-components/table-with-markdown/table-with-markdown.css

@@ -0,0 +1,24 @@
+.table-with-markdown {
+	width: 100%;
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+	background: var(--color-brand-text-bg);
+	padding: 16px;
+
+	table,
+	td,
+	th {
+		border: 1px solid black;
+	}
+
+	td,
+	th {
+		padding: 8px 16px;
+	}
+
+	th {
+		font-weight: bold;
+		font-size: 16px;
+	}
+}

src/back/jdd-components/table-with-markdown/table-with-markdown.jdd.tsx

@@ -0,0 +1,61 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments, isTableHeader } from "@sealcode/jdd";
+
+const component_arguments = {
+	table: new ComponentArguments.Table(
+		new ComponentArguments.ShortText(),
+		new ComponentArguments.Structured({
+			type: new ComponentArguments.Enum(["td", "th"]).setExampleValues(["td"]),
+			content: new ComponentArguments.ShortText().setExampleValues([""]),
+		})
+	),
+} as const;
+
+export class TableWithMarkdown extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	toHTML({
+		args: { table },
+		classes,
+		index,
+		jdd_context: { render_markdown, language },
+	}: ComponentToHTMLArgs<typeof component_arguments>) {
+		return (
+			<div
+				class={["table-with-markdown", ...classes]}
+				style={`--jdd-index: ${index}`}
+			>
+				<table>
+					<tbody>
+						{table.rows.map((row) =>
+							isTableHeader(row) ? (
+								<tr>
+									<th
+										colspan={this.getArguments()
+											.table.getColumnsCount(table)
+											.toString()}
+									>
+										{row.header_content}
+									</th>
+								</tr>
+							) : (
+								<tr>
+									{row.cells.map(({ type, content }) =>
+										type == "td" ? (
+											<td>{render_markdown(language, content)}</td>
+										) : (
+											<th>{render_markdown(language, content)}</th>
+										)
+									)}
+								</tr>
+							)
+						)}
+					</tbody>
+				</table>
+			</div>
+		);
+	}
+}