Skip to content

Commit 835184c

Browse files
Copilothuangyiirene
andcommitted
Changes before error encountered
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent 143d6b7 commit 835184c

1 file changed

Lines changed: 128 additions & 40 deletions

File tree

apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json

Lines changed: 128 additions & 40 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-purple-50 via-pink-50 to-orange-50 p-6",
3+
"className": "min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-orange-100 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/40 p-6 rounded-2xl border border-white/60 shadow-lg",
1212
"body": [
1313
{
1414
"type": "div",
15-
"className": "space-y-1",
15+
"className": "space-y-2",
1616
"body": [
1717
{
1818
"type": "text",
19-
"content": "E-Commerce Dashboard",
20-
"className": "text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent"
19+
"content": "🛍️ E-Commerce Dashboard",
20+
"className": "text-4xl font-extrabold bg-gradient-to-r from-purple-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
2121
},
2222
{
2323
"type": "text",
2424
"content": "Monitor your store performance in real-time",
25-
"className": "text-gray-600"
25+
"className": "text-gray-600 font-medium"
2626
}
2727
]
2828
},
2929
{
3030
"type": "flex",
3131
"direction": "row",
32-
"gap": 2,
32+
"gap": 3,
3333
"children": [
3434
{
3535
"type": "button",
36-
"label": "Download Report",
36+
"label": "📥 Download Report",
3737
"variant": "outline",
38-
"className": "border-purple-200"
38+
"className": "border-purple-200 hover:bg-purple-50 shadow-sm hover:shadow-md transition-all"
3939
},
4040
{
4141
"type": "button",
42-
"label": "View Details",
43-
"className": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700"
42+
"label": "📊 View Details",
43+
"className": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 shadow-lg hover:shadow-xl transition-all"
4444
}
4545
]
4646
}
@@ -53,10 +53,10 @@
5353
"children": [
5454
{
5555
"type": "card",
56-
"className": "bg-gradient-to-br from-blue-500 to-blue-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow",
56+
"className": "bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden",
5757
"body": {
5858
"type": "div",
59-
"className": "space-y-3",
59+
"className": "space-y-4 relative z-10",
6060
"body": [
6161
{
6262
"type": "flex",
@@ -66,35 +66,58 @@
6666
"children": [
6767
{
6868
"type": "text",
69-
"content": "Total Sales",
70-
"className": "text-sm font-medium text-blue-100"
69+
"content": "TOTAL SALES",
70+
"className": "text-xs font-black text-blue-100 uppercase tracking-widest"
7171
},
7272
{
73-
"type": "icon",
74-
"name": "TrendingUp",
75-
"className": "w-5 h-5 text-blue-100"
73+
"type": "div",
74+
"className": "p-2 bg-white/20 backdrop-blur rounded-full",
75+
"body": [
76+
{
77+
"type": "icon",
78+
"name": "TrendingUp",
79+
"className": "w-5 h-5 text-white"
80+
}
81+
]
7682
}
7783
]
7884
},
7985
{
8086
"type": "text",
8187
"content": "$124,563",
82-
"className": "text-4xl font-bold"
88+
"className": "text-5xl font-black tracking-tight"
8389
},
8490
{
85-
"type": "text",
86-
"content": "+25% from last week",
87-
"className": "text-sm text-blue-100"
91+
"type": "div",
92+
"className": "flex items-center gap-2",
93+
"body": [
94+
{
95+
"type": "div",
96+
"className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full",
97+
"body": [
98+
{
99+
"type": "text",
100+
"content": "+25%",
101+
"className": "text-xs font-bold"
102+
}
103+
]
104+
},
105+
{
106+
"type": "text",
107+
"content": "from last week",
108+
"className": "text-sm text-blue-100 font-medium"
109+
}
110+
]
88111
}
89112
]
90113
}
91114
},
92115
{
93116
"type": "card",
94-
"className": "bg-gradient-to-br from-green-500 to-emerald-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow",
117+
"className": "bg-gradient-to-br from-green-500 via-emerald-600 to-teal-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden",
95118
"body": {
96119
"type": "div",
97-
"className": "space-y-3",
120+
"className": "space-y-4 relative z-10",
98121
"body": [
99122
{
100123
"type": "flex",
@@ -104,35 +127,58 @@
104127
"children": [
105128
{
106129
"type": "text",
107-
"content": "New Customers",
108-
"className": "text-sm font-medium text-green-100"
130+
"content": "NEW CUSTOMERS",
131+
"className": "text-xs font-black text-green-100 uppercase tracking-widest"
109132
},
110133
{
111-
"type": "icon",
112-
"name": "UserPlus",
113-
"className": "w-5 h-5 text-green-100"
134+
"type": "div",
135+
"className": "p-2 bg-white/20 backdrop-blur rounded-full",
136+
"body": [
137+
{
138+
"type": "icon",
139+
"name": "UserPlus",
140+
"className": "w-5 h-5 text-white"
141+
}
142+
]
114143
}
115144
]
116145
},
117146
{
118147
"type": "text",
119148
"content": "1,429",
120-
"className": "text-4xl font-bold"
149+
"className": "text-5xl font-black tracking-tight"
121150
},
122151
{
123-
"type": "text",
124-
"content": "+18% from last week",
125-
"className": "text-sm text-green-100"
152+
"type": "div",
153+
"className": "flex items-center gap-2",
154+
"body": [
155+
{
156+
"type": "div",
157+
"className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full",
158+
"body": [
159+
{
160+
"type": "text",
161+
"content": "+18%",
162+
"className": "text-xs font-bold"
163+
}
164+
]
165+
},
166+
{
167+
"type": "text",
168+
"content": "from last week",
169+
"className": "text-sm text-green-100 font-medium"
170+
}
171+
]
126172
}
127173
]
128174
}
129175
},
130176
{
131177
"type": "card",
132-
"className": "bg-gradient-to-br from-orange-500 to-red-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow",
178+
"className": "bg-gradient-to-br from-orange-500 via-red-600 to-pink-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden",
133179
"body": {
134180
"type": "div",
135-
"className": "space-y-3",
181+
"className": "space-y-4 relative z-10",
136182
"body": [
137183
{
138184
"type": "flex",
@@ -142,12 +188,54 @@
142188
"children": [
143189
{
144190
"type": "text",
145-
"content": "Pending Orders",
146-
"className": "text-sm font-medium text-orange-100"
191+
"content": "PENDING ORDERS",
192+
"className": "text-xs font-black text-orange-100 uppercase tracking-widest"
147193
},
148194
{
149-
"type": "icon",
150-
"name": "Clock",
195+
"type": "div",
196+
"className": "p-2 bg-white/20 backdrop-blur rounded-full",
197+
"body": [
198+
{
199+
"type": "icon",
200+
"name": "Clock",
201+
"className": "w-5 h-5 text-white"
202+
}
203+
]
204+
}
205+
]
206+
},
207+
{
208+
"type": "text",
209+
"content": "342",
210+
"className": "text-5xl font-black tracking-tight"
211+
},
212+
{
213+
"type": "div",
214+
"className": "flex items-center gap-2",
215+
"body": [
216+
{
217+
"type": "div",
218+
"className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full",
219+
"body": [
220+
{
221+
"type": "text",
222+
"content": "+12",
223+
"className": "text-xs font-bold"
224+
}
225+
]
226+
},
227+
{
228+
"type": "text",
229+
"content": "waiting for approval",
230+
"className": "text-sm text-orange-100 font-medium"
231+
}
232+
]
233+
}
234+
]
235+
}
236+
}
237+
]
238+
},
151239
"className": "w-5 h-5 text-orange-100"
152240
}
153241
]

0 commit comments

Comments
 (0)