kwikid-components-react
Version:
KwikID's Component Library in React
202 lines (201 loc) • 7.13 kB
JSON
{
"config": {
"layout": {
"id": "state-update-demo",
"styles": "width: 100%; font-family: system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden;",
"components": [
{
"id": "header",
"type": "div",
"styles": "background-color: #1e293b; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center;",
"components": [
{
"id": "title",
"type": "h2",
"value": "Complex State Update Demo",
"styles": "margin: 0; font-size: 1.25rem; font-weight: 600;"
},
{
"id": "render-count",
"type": "div",
"styles": "font-size: 0.875rem; color: #94a3b8;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.renderInfo.count"
}
}
}
}
]
},
{
"id": "content",
"type": "div",
"styles": "padding: 1rem;",
"components": [
{
"id": "user-info",
"type": "div",
"styles": "margin-bottom: 1rem; padding: 1rem; background-color: #f8fafc; border-radius: 0.5rem;",
"components": [
{
"id": "user-name",
"type": "div",
"styles": "font-weight: 600; margin-bottom: 0.5rem;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.user.name"
}
}
}
},
{
"id": "user-email",
"type": "div",
"styles": "color: #64748b;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.user.email"
}
}
}
}
]
},
{
"id": "verification-status",
"type": "div",
"styles": "background-color: #f8fafc; padding: 1rem; border-radius: 0.5rem;",
"components": [
{
"id": "status-title",
"type": "h3",
"value": "Verification Status",
"styles": "margin: 0 0 0.5rem 0; font-size: 1rem;"
},
{
"id": "status-list",
"type": "ul",
"styles": "margin: 0; padding-left: 1.5rem;",
"components": [
{
"id": "status-item-1",
"type": "li",
"styles": "margin-bottom: 0.5rem;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verification.status1"
}
}
}
},
{
"id": "status-item-2",
"type": "li",
"styles": "margin-bottom: 0.5rem;",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verification.status2"
}
}
}
}
]
}
]
},
{
"id": "performance-metrics",
"type": "div",
"styles": "margin-top: 1rem; padding: 1rem; background-color: #f8fafc; border-radius: 0.5rem;",
"components": [
{
"id": "metrics-title",
"type": "h3",
"value": "Performance Metrics",
"styles": "margin: 0 0 0.5rem 0; font-size: 1rem;"
},
{
"id": "metrics-grid",
"type": "div",
"styles": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
"components": [
{
"id": "metric-1",
"type": "div",
"styles": "padding: 0.5rem; background-color: white; border-radius: 0.25rem;",
"components": [
{
"id": "metric-1-label",
"type": "div",
"value": "Last Update:",
"styles": "font-size: 0.875rem; color: #64748b;"
},
{
"id": "metric-1-value",
"type": "div",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.performance.lastUpdate"
}
}
},
"styles": "font-weight: 500;"
}
]
},
{
"id": "metric-2",
"type": "div",
"styles": "padding: 0.5rem; background-color: white; border-radius: 0.25rem;",
"components": [
{
"id": "metric-2-label",
"type": "div",
"value": "Update Count:",
"styles": "font-size: 0.875rem; color: #64748b;"
},
{
"id": "metric-2-value",
"type": "div",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.performance.updateCount"
}
}
},
"styles": "font-weight: 500;"
}
]
}
]
}
]
}
]
}
]
}
}
}