kwikid-components-react
Version:
KwikID's Component Library in React
114 lines (113 loc) • 3.43 kB
JSON
{
"config": {
"layout": {
"id": "document-viewer-container",
"styles": "width: 100%; height: 600px; font-family: system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; display: flex; flex-direction: column;",
"components": [
{
"id": "document-header",
"type": "div",
"styles": "background-color: #1e293b; color: white; padding: 1rem;",
"components": [
{
"id": "document-title",
"type": "h2",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.documentInfo.title"
}
}
},
"styles": "margin: 0; font-size: 1.25rem; font-weight: 600;"
}
]
},
{
"id": "document-container",
"type": "div",
"styles": "flex: 1; display: flex;",
"components": [
{
"id": "document-iframe",
"type": "iframe",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.documentInfo.documentUrl"
}
}
},
"styles": "flex: 1; border: none;"
}
]
},
{
"id": "document-footer",
"type": "div",
"styles": "background-color: #f8fafc; padding: 0.75rem 1rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; font-size: 0.875rem; color: #64748b;",
"components": [
{
"id": "document-type",
"type": "div",
"styles": "",
"components": [
{
"id": "type-label",
"type": "span",
"value": "Document Type: ",
"styles": ""
},
{
"id": "type-value",
"type": "span",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.documentInfo.type"
}
}
},
"styles": "font-weight: 500;"
}
]
},
{
"id": "document-upload-info",
"type": "div",
"styles": "",
"components": [
{
"id": "upload-label",
"type": "span",
"value": "Uploaded: ",
"styles": ""
},
{
"id": "upload-value",
"type": "span",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.documentInfo.uploadedOn"
}
}
},
"styles": "font-weight: 500;"
}
]
}
]
}
]
}
}
}