diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index d0e596754..e7ea3a977 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -4,6 +4,7 @@ import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
import ImageContainer from "../ImageContainer"
import Divider from "../TempDesignSystem/Divider"
+import Table, { TBody, TD, TH, THead, TR } from "../TempDesignSystem/Table"
import BiroScript from "../TempDesignSystem/Text/BiroScript"
import Body from "../TempDesignSystem/Text/Body"
import Caption from "../TempDesignSystem/Text/Caption"
@@ -375,9 +376,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
-
+
{next(node.children, embeds, fullRenderOptions)}
-
+
)
},
@@ -387,11 +388,25 @@ export const renderOptions: RenderOptions = {
next: RTENext,
fullRenderOptions: RenderOptions
) => {
+ // Override the styling of p tags inside the thead tag
+ const theadChildPRenderOptions = {
+ ...fullRenderOptions,
+ [RTETypeEnum.p]: (
+ node: RTEDefaultNode,
+ embeds: EmbedByUid,
+ next: RTENext,
+ fullRenderOptions: RenderOptions
+ ) => (
+
+ {next(node.children, embeds, fullRenderOptions)}
+
+ ),
+ }
const props = extractPossibleAttributes(node.attrs)
return (
-
- {next(node.children, embeds, fullRenderOptions)}
-
+
+ {next(node.children, embeds, theadChildPRenderOptions)}
+
)
},
@@ -403,9 +418,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
-
+
{next(node.children, embeds, fullRenderOptions)}
-
+
)
},
@@ -440,9 +455,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
-
+
{next(node.children, embeds, fullRenderOptions)}
-
+
)
},
@@ -454,9 +469,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
-
+ |
{next(node.children, embeds, fullRenderOptions)}
- |
+
)
},
@@ -468,9 +483,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
-
+ |
{next(node.children, embeds, fullRenderOptions)}
- |
+
)
},
diff --git a/components/TempDesignSystem/Table/index.tsx b/components/TempDesignSystem/Table/index.tsx
new file mode 100644
index 000000000..867bee1a6
--- /dev/null
+++ b/components/TempDesignSystem/Table/index.tsx
@@ -0,0 +1,27 @@
+import styles from "./table.module.css"
+
+function Table({ children }: React.PropsWithChildren) {
+ return
+}
+
+export default Table
+
+export function THead({ children }: React.PropsWithChildren) {
+ return {children}
+}
+
+export function TH({ children }: React.PropsWithChildren) {
+ return {children} |
+}
+
+export function TD({ children }: React.PropsWithChildren) {
+ return {children} |
+}
+
+export function TBody({ children }: React.PropsWithChildren) {
+ return {children}
+}
+
+export function TR({ children }: React.PropsWithChildren) {
+ return {children}
+}
diff --git a/components/TempDesignSystem/Table/table.module.css b/components/TempDesignSystem/Table/table.module.css
new file mode 100644
index 000000000..729e323fd
--- /dev/null
+++ b/components/TempDesignSystem/Table/table.module.css
@@ -0,0 +1,26 @@
+.table {
+ border-radius: var(--Corner-radius-Medium);
+ border-collapse: collapse;
+ overflow: hidden;
+}
+
+.thead {
+ background-color: var(--Base-Background-Secondary-Normal, #f7e1d5);
+}
+
+.tbody {
+ background-color: var(--Base-Surface-Primary-light-Normal, #fff);
+}
+
+.tr:not(:last-of-type) {
+ border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider, #f0c1b6);
+}
+
+.th {
+ padding: var(--Spacing-x2) var(--Spacing-x3);
+ text-align: left;
+}
+
+.td {
+ padding: var(--Spacing-x3);
+}