kwikid-components-react
Version:
KwikID's Component Library in React
157 lines (156 loc) • 5.52 kB
JSON
{
"config": {
"layout": {
"id": "customer-profile-card",
"styles": "width: 100%; max-width: 800px; margin: 2rem auto; font-family: system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);",
"components": [
{
"id": "profile-header",
"type": "div",
"styles": "background-color: #1e293b; color: white; padding: 1.5rem; display: flex; align-items: center; justify-content: space-between;",
"components": [
{
"id": "profile-title-group",
"type": "div",
"styles": "",
"components": [
{
"id": "profile-title",
"type": "h2",
"value": "Customer Verification Profile",
"styles": "margin: 0; font-size: 1.5rem; font-weight: 600;"
},
{
"id": "profile-customer-name",
"type": "p",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.personalDetails.name"
}
}
},
"styles": "margin: 0.25rem 0 0 0; opacity: 0.8; font-size: 1rem;"
}
]
},
{
"id": "profile-status-badge",
"type": "div",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.verificationSummary.overallStatus"
}
}
},
"styles": "padding: 0.5rem 1rem; background-color: #16a34a; color: white; border-radius: 9999px; font-weight: 500; text-transform: uppercase; font-size: 0.875rem;"
}
]
},
{
"id": "profile-details-section",
"type": "div",
"styles": "padding: 1.5rem; background-color: #f8fafc;",
"components": [
{
"id": "personal-details-group",
"type": "div",
"styles": "margin-bottom: 2rem;",
"components": [
{
"id": "personal-details-title",
"type": "h3",
"value": "Personal Details",
"styles": "margin: 0 0 1rem 0; font-size: 1.125rem; color: #334155; font-weight: 600; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem;"
},
{
"id": "personal-details-lvp",
"type": "label-value-pair",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.personalDetails"
}
}
},
"props": {
"config": {
"orientation": "horizontal"
},
"customStyles": {
"container": {
"padding": "0.5rem 0"
},
"label": {
"width": "200px",
"color": "#475569",
"fontWeight": "500"
},
"value": {
"fontWeight": "500",
"color": "#1e293b"
}
}
}
}
]
},
{
"id": "session-info-group",
"type": "div",
"styles": "",
"components": [
{
"id": "session-info-title",
"type": "h3",
"value": "KYC Session Details",
"styles": "margin: 0 0 1rem 0; font-size: 1.125rem; color: #334155; font-weight: 600; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem;"
},
{
"id": "session-info-lvp",
"type": "label-value-pair",
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "DATA",
"path": "$.kycSessionInfo"
}
}
},
"props": {
"config": {
"orientation": "horizontal"
},
"customStyles": {
"container": {
"padding": "0.5rem 0"
},
"label": {
"width": "200px",
"color": "#475569",
"fontWeight": "500"
},
"value": {
"fontWeight": "500",
"color": "#1e293b",
"fontFamily": "monospace"
}
}
}
}
]
}
]
}
]
}
}
}