{
"component": "Re

{
"component": "ResponsiveTable",
"type": "container",
"style": {
"width": "w-full",
"backgroundColor": "#FFFFFF",
"borderRadius": "rounded-lg",
"boxShadow": "shadow-md",
"overflow": "hidden"
},
"children": [
{
"component": "TableHeader",
"type": "container",
"style": {
"backgroundColor": "bg-indigo-900",
"color": "text-white"
},
"layout": {
"display": "grid",
"columns": 12,
"gap": "gap-x-4",
"padding": "px-6 py-4"
},
"children": [
{
"component": "HeaderText",
"gridColumn": "col-span-2",
"content": "Title",
"style": {
"fontSize": "text-sm",
"fontWeight": "font-semibold"
}
},
{
"component": "HeaderText",
"gridColumn": "col-span-4",
"content": "Tag+link+text",
"style": {
"fontSize": "text-sm",
"fontWeight": "font-semibold"
}
},
{
"component": "HeaderText",
"gridColumn": "col-span-2",
"content": "Circle button",
"style": {
"fontSize": "text-sm",
"fontWeight": "font-semibold"
}
},
{
"component": "HeaderText",
"gridColumn": "col-span-4",
"content": "Highlight",
"style": {
"fontSize": "text-sm",
"fontWeight": "font-semibold"
}
}
]
},
{
"component": "TableBody",
"type": "container",
"children": [
{
"component": "RowGroup",
"type": "container",
"layout": {
"display": "grid",
"columns": 12,
"gap": "gap-x-4"
},
"children": [
{
"component": "TitleCell",
"gridColumn": "col-span-2",
"style": {
"padding": "px-6 py-4",
"border": "border-b border-gray-200"
},
"layout": {
"display": "flex",
"flexDirection": "column"
},
"children": [
{
"component": "Text",
"content": "Title",
"style": {
"fontSize": "text-base",
"fontWeight": "font-bold",
"color": "text-gray-900"
}
},
{
"component": "Text",
"content": "※Remark",
"style": {
"fontSize": "text-xs",
"color": "text-gray-500",
"marginTop": "mt-1"
}
}
]
},
{
"component": "DataRowsContainer",
"gridColumn": "col-span-10",
"layout": {
"display": "flex",
"flexDirection": "column"
},
"children": [
{
"component": "DataRow",
"style": {
"border": "border-b border-gray-200"
},
"layout": {
"display": "grid",
"gridTemplateColumns": "subgrid",
"gridColumn": "col-span-10"
},
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "blue", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "1" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "HighlightText", "highlightContent": "highlight", "textContent": " text text text text text text" }
]
}
]
},
{
"component": "DataRow",
"style": { "border": "border-b border-gray-200" },
"layout": { "display": "grid", "gridTemplateColumns": "subgrid", "gridColumn": "col-span-10" },
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "blue", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "2" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "HighlightText", "highlightContent": "highlight", "textContent": " text text text" }
]
}
]
},
{
"component": "DataRow",
"style": { "border": "border-b border-gray-200" },
"layout": { "display": "grid", "gridTemplateColumns": "subgrid", "gridColumn": "col-span-10" },
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "blue", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "3" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "HighlightText", "textContent": "text text text ", "highlightContent": "highlight" }
]
}
]
},
{
"component": "DataRow",
"style": { "border": "border-b border-gray-200" },
"layout": { "display": "grid", "gridTemplateColumns": "subgrid", "gridColumn": "col-span-10" },
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "blue", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "4" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "HighlightText", "textContent": "text ", "highlightContent": "highlight", "textContentAfter": " text" }
]
}
]
},
{
"component": "DataRow",
"style": { "border": "border-b border-gray-200" },
"layout": { "display": "grid", "gridTemplateColumns": "subgrid", "gridColumn": "col-span-10" },
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "blue", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "5" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "HighlightText", "highlightContent": "highlight", "textContent": " text ", "highlightContent2": "text" }
]
}
]
},
{
"component": "DataRow",
"style": { "border": "border-b border-gray-200" },
"layout": { "display": "grid", "gridTemplateColumns": "subgrid", "gridColumn": "col-span-10" },
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "blue", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "6" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "Text", "content": "text text text" }
]
}
]
}
]
}
]
},
{
"component": "RowGroup",
"type": "container",
"layout": {
"display": "grid",
"columns": 12,
"gap": "gap-x-4"
},
"children": [
{
"component": "TitleCell",
"gridColumn": "col-span-2",
"style": {
"padding": "px-6 py-4"
},
"layout": {
"display": "flex",
"flexDirection": "column"
},
"children": [
{
"component": "Text",
"content": "Title",
"style": {
"fontSize": "text-base",
"fontWeight": "font-bold",
"color": "text-gray-900"
}
}
]
},
{
"component": "DataRowsContainer",
"gridColumn": "col-span-10",
"layout": {
"display": "flex",
"flexDirection": "column"
},
"children": [
{
"component": "DataRow",
"style": { "border": "border-b border-gray-200" },
"layout": { "display": "grid", "gridTemplateColumns": "subgrid", "gridColumn": "col-span-10" },
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "orange", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "7" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "Text", "content": "text text text" }
]
}
]
},
{
"component": "DataRow",
"style": { "border": "border-b border-gray-200" },
"layout": { "display": "grid", "gridTemplateColumns": "subgrid", "gridColumn": "col-span-10" },
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "orange", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "8" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "Text", "content": "text text text" }
]
}
]
},
{
"component": "DataRow",
"layout": { "display": "grid", "gridTemplateColumns": "subgrid", "gridColumn": "col-span-10" },
"children": [
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"layout": { "display": "flex", "alignItems": "center", "gap": "gap-x-2" },
"children": [
{ "component": "Tag", "variant": "orange", "content": "Tag" },
{ "component": "Link", "content": "Link" },
{ "component": "Text", "content": "Text", "style": { "color": "text-gray-800" } }
]
},
{
"component": "Cell",
"gridColumn": "col-span-2",
"style": {"padding": "py-4"},
"children": [ { "component": "CircleButton", "content": "9" } ]
},
{
"component": "Cell",
"gridColumn": "col-span-4",
"style": {"padding": "py-4"},
"children": [
{ "component": "Text", "content": "text text text" }
]
}
]
}
]
}
]
}
]
},
{
"component": "ComponentDefinitions",
"children": [
{
"component": "Tag",
"variants": {
"blue": {
"backgroundColor": "bg-sky-100",
"textColor": "text-sky-700",
"border": "border border-sky-300",
"padding": "px-2.5 py-0.5",
"borderRadius": "rounded-full",
"fontSize": "text-sm"
},
"orange": {
"backgroundColor": "bg-amber-100",
"textColor": "text-amber-800",
"border": "border border-amber-300",
"padding": "px-2.5 py-0.5",
"borderRadius": "rounded-full",
"fontSize": "text-sm"
}
}
},
{
"component": "Link",
"style": {
"color": "text-indigo-600",
"textDecoration": "underline",
"fontSize": "text-base",
"fontWeight": "font-medium"
}
},
{
"component": "CircleButton",
"style": {
"width": "w-8",
"height": "h-8",
"backgroundColor": "bg-indigo-900",
"borderRadius": "rounded-full",
"color": "text-white",
"fontSize": "text-base",
"fontWeight": "font-bold"
},
"layout": {
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
},
{
"component": "HighlightText",
"style": {
"baseTextColor": "text-gray-800",
"fontSize": "text-base"
},
"highlightStyle": {
"backgroundColor": "bg-sky-100",
"textColor": "text-sky-800",
"borderRadius": "rounded-md",
"padding": "px-1"
}
}
]
}
]
}