Skip to content

Commit 3b00948

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Enhance complex and data-display examples with modern styling
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 835184c commit 3b00948

3 files changed

Lines changed: 307 additions & 282 deletions

File tree

‎apps/playground/src/data/examples/complex/kanban-board.json‎

Lines changed: 74 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,86 @@
11
{
22
"type": "div",
3-
"className": "space-y-4",
3+
"className": "min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-6 md:p-8",
44
"body": [
55
{
66
"type": "div",
7-
"className": "space-y-2",
7+
"className": "space-y-6",
88
"body": [
99
{
10-
"type": "text",
11-
"content": "Kanban Board",
12-
"className": "text-2xl font-bold"
10+
"type": "div",
11+
"className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl",
12+
"body": [
13+
{
14+
"type": "text",
15+
"content": "📋 Kanban Board",
16+
"className": "text-4xl font-black bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent"
17+
},
18+
{
19+
"type": "text",
20+
"content": "Drag and drop kanban board for project management - similar to Trello",
21+
"className": "text-gray-600 font-medium text-lg"
22+
}
23+
]
1324
},
1425
{
15-
"type": "text",
16-
"content": "Drag and drop kanban board for project management - similar to Trello",
17-
"className": "text-muted-foreground"
18-
}
19-
]
20-
},
21-
{
22-
"type": "kanban",
23-
"className": "h-[600px]",
24-
"columns": [
25-
{ "id": "todo", "title": "To Do", "color": "bg-slate-100" },
26-
{ "id": "in-progress", "title": "In Progress", "color": "bg-blue-50" },
27-
{ "id": "review", "title": "Review", "color": "bg-orange-50" },
28-
{ "id": "done", "title": "Done", "color": "bg-green-50" }
29-
],
30-
"data": [
31-
{
32-
"id": 1,
33-
"title": "Research Competitors",
34-
"description": "Analyze top 3 competitors features and pricing",
35-
"status": "todo",
36-
"priority": "high",
37-
"assignee": "John Doe"
38-
},
39-
{
40-
"id": 2,
41-
"title": "Design System Draft",
42-
"description": "Create initial tokens and core components",
43-
"status": "in-progress",
44-
"priority": "critical",
45-
"assignee": "Jane Smith"
46-
},
47-
{
48-
"id": 3,
49-
"title": "Setup CI/CD Pipeline",
50-
"description": "Configure GitHub Actions for automated testing",
51-
"status": "review",
52-
"priority": "medium",
53-
"assignee": "Bob Johnson"
54-
},
55-
{
56-
"id": 4,
57-
"title": "User Interview Script",
58-
"description": "Prepare questions for user research phase",
59-
"status": "todo",
60-
"priority": "low",
61-
"assignee": "Alice Williams"
62-
},
63-
{
64-
"id": 5,
65-
"title": "Database Schema",
66-
"description": "Finalize database relationships and indexing strategy",
67-
"status": "done",
68-
"priority": "critical",
69-
"assignee": "Charlie Brown"
70-
},
71-
{
72-
"id": 6,
73-
"title": "API Documentation",
74-
"description": "Document all endpoints using OpenAPI spec",
75-
"status": "in-progress",
76-
"priority": "high",
77-
"assignee": "Diana Prince"
26+
"type": "kanban",
27+
"className": "h-[600px]",
28+
"columns": [
29+
{ "id": "todo", "title": "📝 To Do", "color": "bg-gradient-to-br from-slate-50 to-gray-100" },
30+
{ "id": "in-progress", "title": "⚡ In Progress", "color": "bg-gradient-to-br from-blue-50 to-cyan-100" },
31+
{ "id": "review", "title": "👀 Review", "color": "bg-gradient-to-br from-orange-50 to-amber-100" },
32+
{ "id": "done", "title": "✅ Done", "color": "bg-gradient-to-br from-green-50 to-emerald-100" }
33+
],
34+
"data": [
35+
{
36+
"id": 1,
37+
"title": "🔍 Research Competitors",
38+
"description": "Analyze top 3 competitors features and pricing",
39+
"status": "todo",
40+
"priority": "high",
41+
"assignee": "John Doe"
42+
},
43+
{
44+
"id": 2,
45+
"title": "🎨 Design System Draft",
46+
"description": "Create initial tokens and core components",
47+
"status": "in-progress",
48+
"priority": "critical",
49+
"assignee": "Jane Smith"
50+
},
51+
{
52+
"id": 3,
53+
"title": "🚀 Setup CI/CD Pipeline",
54+
"description": "Configure GitHub Actions for automated testing",
55+
"status": "review",
56+
"priority": "medium",
57+
"assignee": "Bob Johnson"
58+
},
59+
{
60+
"id": 4,
61+
"title": "💬 User Interview Script",
62+
"description": "Prepare questions for user research phase",
63+
"status": "todo",
64+
"priority": "low",
65+
"assignee": "Alice Williams"
66+
},
67+
{
68+
"id": 5,
69+
"title": "🗄️ Database Schema",
70+
"description": "Finalize database relationships and indexing strategy",
71+
"status": "done",
72+
"priority": "critical",
73+
"assignee": "Charlie Brown"
74+
},
75+
{
76+
"id": 6,
77+
"title": "📚 API Documentation",
78+
"description": "Document all endpoints using OpenAPI spec",
79+
"status": "in-progress",
80+
"priority": "high",
81+
"assignee": "Diana Prince"
82+
}
83+
]
7884
}
7985
]
8086
}

‎apps/playground/src/data/examples/complex/timeline-events.json‎

Lines changed: 84 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,93 @@
11
{
22
"type": "div",
3-
"className": "space-y-6 max-w-4xl",
3+
"className": "min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-6 md:p-8",
44
"body": [
55
{
66
"type": "div",
7-
"className": "space-y-2",
7+
"className": "max-w-4xl mx-auto space-y-8",
88
"body": [
99
{
10-
"type": "text",
11-
"content": "Timeline Component",
12-
"className": "text-3xl font-bold"
10+
"type": "div",
11+
"className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center",
12+
"body": [
13+
{
14+
"type": "text",
15+
"content": "⏱️ Timeline Component",
16+
"className": "text-4xl font-black bg-gradient-to-r from-slate-700 via-blue-600 to-indigo-600 bg-clip-text text-transparent"
17+
},
18+
{
19+
"type": "text",
20+
"content": "Display chronological events in a beautiful visual timeline",
21+
"className": "text-gray-600 font-medium text-lg"
22+
}
23+
]
1324
},
1425
{
15-
"type": "text",
16-
"content": "Display chronological events in a visual timeline",
17-
"className": "text-muted-foreground"
18-
}
19-
]
20-
},
21-
{
22-
"type": "card",
23-
"className": "p-6",
24-
"body": {
25-
"type": "div",
26-
"className": "space-y-6",
27-
"body": [
28-
{
26+
"type": "card",
27+
"className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl",
28+
"body": {
2929
"type": "div",
30-
"className": "space-y-4",
30+
"className": "space-y-8",
3131
"body": [
3232
{
33-
"type": "text",
34-
"content": "Project Timeline",
35-
"className": "text-lg font-semibold"
36-
},
37-
{
38-
"type": "timeline",
39-
"items": [
40-
{
41-
"title": "Project Initiated",
42-
"description": "Initial planning and team formation completed",
43-
"timestamp": "2024-01-15",
44-
"status": "completed"
45-
},
33+
"type": "div",
34+
"className": "space-y-6",
35+
"body": [
4636
{
47-
"title": "Design Phase",
48-
"description": "UI/UX design and architecture planning",
49-
"timestamp": "2024-02-01",
50-
"status": "completed"
37+
"type": "text",
38+
"content": "🚀 Project Timeline",
39+
"className": "text-2xl font-bold text-gray-900"
5140
},
5241
{
53-
"title": "Development Sprint 1",
54-
"description": "Core components and infrastructure setup",
55-
"timestamp": "2024-03-01",
56-
"status": "completed"
57-
},
58-
{
59-
"title": "Testing & QA",
60-
"description": "Comprehensive testing and bug fixes",
61-
"timestamp": "2024-04-15",
62-
"status": "in-progress"
63-
},
64-
{
65-
"title": "Production Release",
66-
"description": "Deploy to production environment",
67-
"timestamp": "2024-05-01",
68-
"status": "pending"
42+
"type": "timeline",
43+
"items": [
44+
{
45+
"title": "✨ Project Initiated",
46+
"description": "Initial planning and team formation completed",
47+
"timestamp": "2024-01-15",
48+
"status": "completed"
49+
},
50+
{
51+
"title": "🎨 Design Phase",
52+
"description": "UI/UX design and architecture planning",
53+
"timestamp": "2024-02-01",
54+
"status": "completed"
55+
},
56+
{
57+
"title": "⚡ Development Sprint 1",
58+
"description": "Core components and infrastructure setup",
59+
"timestamp": "2024-03-01",
60+
"status": "completed"
61+
},
62+
{
63+
"title": "🧪 Testing & QA",
64+
"description": "Comprehensive testing and bug fixes",
65+
"timestamp": "2024-04-15",
66+
"status": "in-progress"
67+
},
68+
{
69+
"title": "🚀 Production Release",
70+
"description": "Deploy to production environment",
71+
"timestamp": "2024-05-01",
72+
"status": "pending"
73+
}
74+
]
6975
}
7076
]
71-
}
72-
]
73-
},
74-
{
75-
"type": "separator"
76-
},
77-
{
78-
"type": "div",
79-
"className": "space-y-4",
80-
"body": [
77+
},
8178
{
82-
"type": "text",
83-
"content": "User Activity",
84-
"className": "text-lg font-semibold"
79+
"type": "separator",
80+
"className": "my-6"
8581
},
82+
{
83+
"type": "div",
84+
"className": "space-y-6",
85+
"body": [
86+
{
87+
"type": "text",
88+
"content": "👤 User Activity",
89+
"className": "text-2xl font-bold text-gray-900"
90+
},
8691
{
8792
"type": "timeline",
8893
"items": [
@@ -122,19 +127,19 @@
122127
}
123128
]
124129
}
125-
},
126-
{
127-
"type": "card",
128-
"className": "p-6",
129-
"body": {
130-
"type": "div",
131-
"className": "space-y-4",
132-
"body": [
133-
{
134-
"type": "text",
135-
"content": "Order Tracking",
136-
"className": "text-lg font-semibold"
137-
},
130+
},
131+
{
132+
"type": "card",
133+
"className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl",
134+
"body": {
135+
"type": "div",
136+
"className": "space-y-6",
137+
"body": [
138+
{
139+
"type": "text",
140+
"content": "📦 Order Tracking",
141+
"className": "text-2xl font-bold text-gray-900"
142+
},
138143
{
139144
"type": "timeline",
140145
"orientation": "horizontal",

0 commit comments

Comments
 (0)