Skip to content

Commit d0a1b14

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Enhance project management dashboard and badge examples
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 3b00948 commit d0a1b14

2 files changed

Lines changed: 100 additions & 72 deletions

File tree

‎apps/playground/src/data/examples/dashboards/project-management.json‎

Lines changed: 72 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
11
{
22
"type": "div",
3-
"className": "min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-6",
3+
"className": "min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-gray-950 p-6 md:p-8",
44
"body": [
55
{
66
"type": "div",
7-
"className": "max-w-7xl mx-auto space-y-6",
7+
"className": "max-w-7xl mx-auto space-y-8",
88
"body": [
99
{
1010
"type": "div",
11-
"className": "flex justify-between items-center",
11+
"className": "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 backdrop-blur-sm bg-white/5 p-6 rounded-2xl border border-white/10 shadow-2xl",
1212
"body": [
1313
{
1414
"type": "div",
15-
"className": "space-y-1",
15+
"className": "space-y-2",
1616
"body": [
1717
{
1818
"type": "text",
19-
"content": "Project Management",
20-
"className": "text-3xl font-bold text-white"
19+
"content": "🎯 Project Management",
20+
"className": "text-4xl font-extrabold bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent"
2121
},
2222
{
2323
"type": "text",
2424
"content": "Track your team's progress and deliverables",
25-
"className": "text-gray-400"
25+
"className": "text-gray-400 font-medium text-lg"
2626
}
2727
]
2828
},
2929
{
3030
"type": "flex",
3131
"direction": "row",
32-
"gap": 2,
32+
"gap": 3,
3333
"children": [
3434
{
3535
"type": "button",
36-
"label": "New Project",
37-
"className": "bg-indigo-600 hover:bg-indigo-700 text-white"
36+
"label": "➕ New Project",
37+
"className": "bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all"
3838
},
3939
{
4040
"type": "button",
41-
"label": "Settings",
41+
"label": "⚙️ Settings",
4242
"variant": "outline",
43-
"className": "border-gray-600 text-gray-300 hover:bg-gray-800"
43+
"className": "border-gray-600 text-gray-300 hover:bg-gray-800 hover:border-gray-500 shadow-md transition-all"
4444
}
4545
]
4646
}
@@ -53,10 +53,10 @@
5353
"children": [
5454
{
5555
"type": "card",
56-
"className": "bg-gray-800 border border-gray-700 p-6 shadow-xl",
56+
"className": "bg-gradient-to-br from-gray-800 to-gray-900 border border-purple-500/20 p-8 shadow-2xl hover:shadow-purple-500/20 hover:-translate-y-1 transition-all duration-300",
5757
"body": {
5858
"type": "div",
59-
"className": "space-y-3",
59+
"className": "space-y-4",
6060
"body": [
6161
{
6262
"type": "flex",
@@ -66,35 +66,41 @@
6666
"children": [
6767
{
6868
"type": "text",
69-
"content": "Active Projects",
70-
"className": "text-sm font-medium text-gray-400"
69+
"content": "ACTIVE PROJECTS",
70+
"className": "text-xs font-black text-gray-400 uppercase tracking-widest"
7171
},
7272
{
73-
"type": "icon",
74-
"name": "FolderOpen",
75-
"className": "w-5 h-5 text-indigo-400"
73+
"type": "div",
74+
"className": "p-2 bg-indigo-500/20 rounded-full backdrop-blur",
75+
"body": [
76+
{
77+
"type": "icon",
78+
"name": "FolderOpen",
79+
"className": "w-5 h-5 text-indigo-400"
80+
}
81+
]
7682
}
7783
]
7884
},
7985
{
8086
"type": "text",
8187
"content": "24",
82-
"className": "text-4xl font-bold text-white"
88+
"className": "text-5xl font-black text-white tracking-tight"
8389
},
8490
{
8591
"type": "progress",
8692
"value": 75,
87-
"className": "bg-gray-700"
93+
"className": "bg-gray-700 [&>div]:bg-gradient-to-r [&>div]:from-indigo-500 [&>div]:to-purple-500"
8894
}
8995
]
9096
}
9197
},
9298
{
9399
"type": "card",
94-
"className": "bg-gray-800 border border-gray-700 p-6 shadow-xl",
100+
"className": "bg-gradient-to-br from-gray-800 to-gray-900 border border-green-500/20 p-8 shadow-2xl hover:shadow-green-500/20 hover:-translate-y-1 transition-all duration-300",
95101
"body": {
96102
"type": "div",
97-
"className": "space-y-3",
103+
"className": "space-y-4",
98104
"body": [
99105
{
100106
"type": "flex",
@@ -104,35 +110,41 @@
104110
"children": [
105111
{
106112
"type": "text",
107-
"content": "Team Members",
108-
"className": "text-sm font-medium text-gray-400"
113+
"content": "TEAM MEMBERS",
114+
"className": "text-xs font-black text-gray-400 uppercase tracking-widest"
109115
},
110116
{
111-
"type": "icon",
112-
"name": "Users",
113-
"className": "w-5 h-5 text-green-400"
117+
"type": "div",
118+
"className": "p-2 bg-green-500/20 rounded-full backdrop-blur",
119+
"body": [
120+
{
121+
"type": "icon",
122+
"name": "Users",
123+
"className": "w-5 h-5 text-green-400"
124+
}
125+
]
114126
}
115127
]
116128
},
117129
{
118130
"type": "text",
119131
"content": "142",
120-
"className": "text-4xl font-bold text-white"
132+
"className": "text-5xl font-black text-white tracking-tight"
121133
},
122134
{
123135
"type": "text",
124136
"content": "↗ 12 new this month",
125-
"className": "text-sm text-green-400"
137+
"className": "text-sm text-green-400 font-semibold"
126138
}
127139
]
128140
}
129141
},
130142
{
131143
"type": "card",
132-
"className": "bg-gray-800 border border-gray-700 p-6 shadow-xl",
144+
"className": "bg-gradient-to-br from-gray-800 to-gray-900 border border-cyan-500/20 p-8 shadow-2xl hover:shadow-cyan-500/20 hover:-translate-y-1 transition-all duration-300",
133145
"body": {
134146
"type": "div",
135-
"className": "space-y-3",
147+
"className": "space-y-4",
136148
"body": [
137149
{
138150
"type": "flex",
@@ -142,35 +154,41 @@
142154
"children": [
143155
{
144156
"type": "text",
145-
"content": "Tasks Completed",
146-
"className": "text-sm font-medium text-gray-400"
157+
"content": "TASKS COMPLETED",
158+
"className": "text-xs font-black text-gray-400 uppercase tracking-widest"
147159
},
148160
{
149-
"type": "icon",
150-
"name": "CheckCircle",
151-
"className": "w-5 h-5 text-cyan-400"
161+
"type": "div",
162+
"className": "p-2 bg-cyan-500/20 rounded-full backdrop-blur",
163+
"body": [
164+
{
165+
"type": "icon",
166+
"name": "CheckCircle",
167+
"className": "w-5 h-5 text-cyan-400"
168+
}
169+
]
152170
}
153171
]
154172
},
155173
{
156174
"type": "text",
157175
"content": "389",
158-
"className": "text-4xl font-bold text-white"
176+
"className": "text-5xl font-black text-white tracking-tight"
159177
},
160178
{
161179
"type": "text",
162180
"content": "85% completion rate",
163-
"className": "text-sm text-cyan-400"
181+
"className": "text-sm text-cyan-400 font-semibold"
164182
}
165183
]
166184
}
167185
},
168186
{
169187
"type": "card",
170-
"className": "bg-gray-800 border border-gray-700 p-6 shadow-xl",
188+
"className": "bg-gradient-to-br from-gray-800 to-gray-900 border border-red-500/20 p-8 shadow-2xl hover:shadow-red-500/20 hover:-translate-y-1 transition-all duration-300",
171189
"body": {
172190
"type": "div",
173-
"className": "space-y-3",
191+
"className": "space-y-4",
174192
"body": [
175193
{
176194
"type": "flex",
@@ -180,25 +198,31 @@
180198
"children": [
181199
{
182200
"type": "text",
183-
"content": "Overdue Tasks",
184-
"className": "text-sm font-medium text-gray-400"
201+
"content": "OVERDUE TASKS",
202+
"className": "text-xs font-black text-gray-400 uppercase tracking-widest"
185203
},
186204
{
187-
"type": "icon",
188-
"name": "AlertCircle",
189-
"className": "w-5 h-5 text-red-400"
205+
"type": "div",
206+
"className": "p-2 bg-red-500/20 rounded-full backdrop-blur",
207+
"body": [
208+
{
209+
"type": "icon",
210+
"name": "AlertCircle",
211+
"className": "w-5 h-5 text-red-400"
212+
}
213+
]
190214
}
191215
]
192216
},
193217
{
194218
"type": "text",
195219
"content": "15",
196-
"className": "text-4xl font-bold text-white"
220+
"className": "text-5xl font-black text-white tracking-tight"
197221
},
198222
{
199223
"type": "text",
200224
"content": "Needs attention",
201-
"className": "text-sm text-red-400"
225+
"className": "text-sm text-red-400 font-semibold"
202226
}
203227
]
204228
}

‎apps/playground/src/data/examples/data-display/badge-labels.json‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
11
{
22
"type": "div",
3-
"className": "space-y-6 max-w-4xl",
3+
"className": "min-h-screen bg-gradient-to-br from-violet-50 via-purple-50 to-fuchsia-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": "Badge 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": "🏷️ Badge Component",
16+
"className": "text-4xl font-black bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 bg-clip-text text-transparent"
17+
},
18+
{
19+
"type": "text",
20+
"content": "Beautiful labels and status indicators for modern UIs",
21+
"className": "text-gray-600 font-medium text-lg"
22+
}
23+
]
1324
},
1425
{
15-
"type": "text",
16-
"content": "Labels and status indicators",
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": "Badge Variants",
35-
"className": "text-lg font-semibold"
36-
},
33+
"type": "div",
34+
"className": "space-y-6",
35+
"body": [
36+
{
37+
"type": "text",
38+
"content": "✨ Badge Variants",
39+
"className": "text-2xl font-bold text-gray-900"
40+
},
3741
{
3842
"type": "flex",
3943
"direction": "row",

0 commit comments

Comments
 (0)