Files
low-code-react-app-b/src/data/atomic-showcase/display.json

70 lines
2.1 KiB
JSON

{
"displayTitle": "Display Components",
"avatarTitle": "Avatar",
"avatarFallback": "JD",
"ratingTitle": "Rating",
"colorSwatchesTitle": "Color Swatches",
"colorSwatches": [
{ "color": "#8b5cf6", "label": "Primary" },
{ "color": "#06b6d4", "label": "Accent" },
{ "color": "#ef4444", "label": "Error" }
],
"timestampTitle": "Timestamp",
"stepperTitle": "Stepper",
"stepperSteps": [
{ "label": "Account", "description": "Create your account" },
{ "label": "Profile", "description": "Add personal details" },
{ "label": "Complete", "description": "Finish setup" }
],
"timelineTitle": "Timeline",
"timelineItems": [
{
"title": "Project Created",
"description": "Initial setup completed",
"timestamp": "2 hours ago",
"status": "completed"
},
{
"title": "Development",
"description": "Currently building features",
"timestamp": "now",
"status": "current"
},
{
"title": "Testing",
"description": "QA phase",
"status": "pending"
}
],
"tableTitle": "Table",
"tableColumns": [
{ "key": "name", "header": "Name" },
{ "key": "email", "header": "Email" },
{ "key": "status", "header": "Status" }
],
"tableData": [
{ "id": 1, "name": "John Doe", "email": "john@example.com", "status": "active" },
{ "id": 2, "name": "Jane Smith", "email": "jane@example.com", "status": "inactive" },
{ "id": 3, "name": "Bob Johnson", "email": "bob@example.com", "status": "active" }
],
"accordionTitle": "Accordion",
"accordionItems": [
{
"id": "1",
"title": "What is an atomic component?",
"content": "Atomic components are the smallest building blocks in a design system, representing basic UI elements that cannot be broken down further."
},
{
"id": "2",
"title": "How do I use these components?",
"content": "Import the components from the atoms folder and use them in your React components with full TypeScript support."
}
],
"navigationTitle": "Navigation",
"breadcrumbs": [
{ "label": "Home" },
{ "label": "Components" },
{ "label": "Showcase" }
]
}