kwikid-components-react
Version:
KwikID's Component Library in React
151 lines (150 loc) • 5.65 kB
JSON
{
"config": {
"layout": {
"id": "kyc-verification-table",
"styles": "width: 100%; font-family: sans-serif;",
"components": [
{
"id": "kyc-header",
"type": "div",
"styles": "background-color: #f5f7fa; padding: 1rem; border-radius: 0.5rem 0.5rem 0 0; border-bottom: 2px solid #e6e9ef;",
"components": [
{
"id": "kyc-title",
"type": "h2",
"value": "KYC Verification Summary",
"styles": "margin: 0; color: #333; font-size: 1.25rem;"
}
]
},
{
"id": "kyc-table-container",
"type": "div",
"styles": "border: 1px solid #e6e9ef; border-radius: 0 0 0.5rem 0.5rem; overflow: hidden;",
"components": [
{
"id": "kyc-table",
"type": "table",
"styles": "width: 100%; border-collapse: collapse;",
"components": [
{
"id": "kyc-table-header",
"type": "thead",
"styles": "",
"components": [
{
"id": "kyc-table-header-row",
"type": "tr",
"styles": "background-color: #f5f7fa;",
"components": [
{
"id": "header-field",
"type": "th",
"value": "Field",
"styles": "padding: 0.75rem; text-align: left; font-weight: 600; border-bottom: 1px solid #e6e9ef;"
},
{
"id": "header-value",
"type": "th",
"value": "Value",
"styles": "padding: 0.75rem; text-align: left; font-weight: 600; border-bottom: 1px solid #e6e9ef;"
},
{
"id": "header-status",
"type": "th",
"value": "Status",
"styles": "padding: 0.75rem; text-align: left; font-weight: 600; border-bottom: 1px solid #e6e9ef;"
}
]
}
]
},
{
"id": "kyc-table-body",
"type": "tbody",
"styles": "",
"components": [
{
"id": "row-name",
"type": "tr",
"styles": "border-bottom: 1px solid #e6e9ef;",
"components": [
{
"id": "field-name",
"type": "td",
"value": "Full Name",
"styles": "padding: 0.75rem; font-weight: 500;"
},
{
"id": "value-name",
"type": "td",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.customerInfo.name"
}
}
},
"styles": "padding: 0.75rem;"
},
{
"id": "status-name",
"type": "td",
"value": "✓ Verified",
"styles": "padding: 0.75rem; color: #22c55e;"
}
]
},
{
"id": "row-pan",
"type": "tr",
"styles": "border-bottom: 1px solid #e6e9ef;",
"components": [
{
"id": "field-pan",
"type": "td",
"value": "PAN Card",
"styles": "padding: 0.75rem; font-weight: 500;"
},
{
"id": "value-pan",
"type": "td",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.panVerification.panNumber"
}
}
},
"styles": "padding: 0.75rem;"
},
{
"id": "status-pan",
"type": "td",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.panVerification.verificationResult"
}
}
},
"styles": "padding: 0.75rem; color: #22c55e;"
}
]
}
]
}
]
}
]
}
]
}
}
}