Skip to content

Commit b0d56fd

Browse files
hotlonghotlong
committed
Refactor dashboard example and update showcase title
Replaces examples/dashboard/app.json with a new index.json featuring an updated dashboard layout and structure. Also updates the title in examples/showcase/app.json from 'Component Showcase' to 'Showcase' for consistency.
1 parent 27f115a commit b0d56fd

File tree

3 files changed

+233
-98
lines changed

3 files changed

+233
-98
lines changed

‎examples/dashboard/app.json‎

Lines changed: 0 additions & 97 deletions
This file was deleted.

‎examples/dashboard/index.json‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
{
2+
"type": "page",
3+
"title": "Dashboard",
4+
"className": "h-screen w-full bg-background font-sans text-foreground",
5+
"body": [
6+
{
7+
"type": "div",
8+
"className": "flex h-screen overflow-hidden",
9+
"children": [
10+
{
11+
"type": "aside",
12+
"className": "w-64 flex-shrink-0 border-r bg-muted/40 hidden md:flex flex-col",
13+
"children": [
14+
{
15+
"type": "div",
16+
"className": "h-14 flex items-center px-4 font-semibold text-lg tracking-tight border-b",
17+
"children": [
18+
{ "type": "icon", "name": "circle-stop", "className": "w-5 h-5 mr-2" },
19+
{ "type": "text", "value": "Acme Inc." }
20+
]
21+
},
22+
{
23+
"type": "div",
24+
"className": "px-4 py-2 mt-2",
25+
"children": [
26+
{ "type": "button", "label": "Quick Create", "className": "w-full justify-start rounded-full bg-primary text-primary-foreground hover:bg-primary/90", "icon": "plus-circle" }
27+
]
28+
},
29+
{
30+
"type": "nav",
31+
"className": "flex-1 px-2 py-4 space-y-1 overflow-y-auto",
32+
"children": [
33+
{ "type": "button", "label": "Dashboard", "variant": "ghost", "className": "w-full justify-start font-medium px-2 py-1.5 h-auto hover:bg-muted", "icon": "layout-dashboard" },
34+
{ "type": "button", "label": "Lifecycle", "variant": "ghost", "className": "w-full justify-start font-medium px-2 py-1.5 h-auto hover:bg-muted", "icon": "refresh-cw" },
35+
{ "type": "button", "label": "Analytics", "variant": "ghost", "className": "w-full justify-start font-medium px-2 py-1.5 h-auto hover:bg-muted", "icon": "bar-chart-3" },
36+
{ "type": "button", "label": "Projects", "variant": "ghost", "className": "w-full justify-start font-medium px-2 py-1.5 h-auto hover:bg-muted", "icon": "folder" },
37+
{ "type": "button", "label": "Team", "variant": "ghost", "className": "w-full justify-start font-medium px-2 py-1.5 h-auto hover:bg-muted", "icon": "users" },
38+
39+
{ "type": "div", "className": "pt-6 pb-2 px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider", "children": [{ "type": "text", "value": "Documents" }] },
40+
41+
{ "type": "button", "label": "Data Library", "variant": "ghost", "className": "w-full justify-start font-medium px-2 py-1.5 h-auto hover:bg-muted", "icon": "database" },
42+
{ "type": "button", "label": "Reports", "variant": "ghost", "className": "w-full justify-start font-medium px-2 py-1.5 h-auto hover:bg-muted", "icon": "file-text" },
43+
{ "type": "button", "label": "Word Assistant", "variant": "ghost", "className": "w-full justify-start font-medium px-2 py-1.5 h-auto hover:bg-muted", "icon": "file-edit" }
44+
]
45+
},
46+
{
47+
"type": "div",
48+
"className": "p-4 border-t space-y-1",
49+
"children": [
50+
{ "type": "button", "label": "Settings", "variant": "ghost", "className": "w-full justify-start px-2 h-8 text-sm text-muted-foreground", "icon": "settings" },
51+
{ "type": "button", "label": "Get Help", "variant": "ghost", "className": "w-full justify-start px-2 h-8 text-sm text-muted-foreground", "icon": "help-circle" }
52+
]
53+
}
54+
]
55+
},
56+
{
57+
"type": "main",
58+
"className": "flex-1 flex flex-col overflow-y-auto bg-background",
59+
"children": [
60+
{
61+
"type": "header",
62+
"className": "h-14 border-b flex items-center justify-between px-6 sticky top-0 bg-background/95 backdrop-blur z-10",
63+
"children": [
64+
{
65+
"type": "div",
66+
"className": "flex items-center gap-2 text-sm text-muted-foreground",
67+
"children": [
68+
{ "type": "icon", "name": "panel-left", "className": "w-4 h-4 cursor-pointer hover:text-foreground" },
69+
{ "type": "text", "value": "Documents", "className": "font-medium text-foreground" }
70+
]
71+
},
72+
{ "type": "text", "value": "GitHub", "className": "font-semibold text-sm" }
73+
]
74+
},
75+
{
76+
"type": "div",
77+
"className": "p-8 w-full space-y-8 max-w-[1600px] mx-auto",
78+
"children": [
79+
{
80+
"type": "grid",
81+
"className": "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6",
82+
"children": [
83+
{
84+
"type": "card",
85+
"className": "p-6 shadow-sm",
86+
"children": [
87+
{ "type": "div", "className": "flex justify-between items-start mb-2", "children": [
88+
{ "type": "text", "value": "Total Revenue", "className": "text-sm font-medium text-muted-foreground" },
89+
{ "type": "text", "value": "↗ +12.5%", "className": "text-xs font-medium text-foreground bg-secondary px-1.5 py-0.5 rounded-md" }
90+
]},
91+
{ "type": "text", "value": "$1,250.00", "className": "text-3xl font-bold tracking-tight text-foreground" },
92+
{ "type": "div", "className": "flex items-center mt-4 gap-2", "children": [
93+
{ "type": "icon", "name": "trending-up", "className": "w-4 h-4 text-primary" },
94+
{ "type": "text", "value": "Trending up this month", "className": "text-xs text-muted-foreground" }
95+
]},
96+
{ "type": "text", "value": "Visitors for the last 6 months", "className": "text-xs text-muted-foreground mt-1" }
97+
]
98+
},
99+
{
100+
"type": "card",
101+
"className": "p-6 shadow-sm",
102+
"children": [
103+
{ "type": "div", "className": "flex justify-between items-start mb-2", "children": [
104+
{ "type": "text", "value": "New Customers", "className": "text-sm font-medium text-muted-foreground" },
105+
{ "type": "text", "value": "↘ -20%", "className": "text-xs font-medium text-foreground bg-secondary px-1.5 py-0.5 rounded-md" }
106+
]},
107+
{ "type": "text", "value": "1,234", "className": "text-3xl font-bold tracking-tight text-foreground" },
108+
{ "type": "div", "className": "flex items-center mt-4 gap-2", "children": [
109+
{ "type": "icon", "name": "trending-down", "className": "w-4 h-4 text-destructive" },
110+
{ "type": "text", "value": "Down 20% this period", "className": "text-xs text-muted-foreground" }
111+
]},
112+
{ "type": "text", "value": "Acquisition needs attention", "className": "text-xs text-muted-foreground mt-1" }
113+
]
114+
},
115+
{
116+
"type": "card",
117+
"className": "p-6 shadow-sm",
118+
"children": [
119+
{ "type": "div", "className": "flex justify-between items-start mb-2", "children": [
120+
{ "type": "text", "value": "Active Accounts", "className": "text-sm font-medium text-muted-foreground" },
121+
{ "type": "text", "value": "↗ +12.5%", "className": "text-xs font-medium text-foreground bg-secondary px-1.5 py-0.5 rounded-md" }
122+
]},
123+
{ "type": "text", "value": "45,678", "className": "text-3xl font-bold tracking-tight text-foreground" },
124+
{ "type": "div", "className": "flex items-center mt-4 gap-2", "children": [
125+
{ "type": "icon", "name": "trending-up", "className": "w-4 h-4 text-primary" },
126+
{ "type": "text", "value": "Strong user retention", "className": "text-xs text-muted-foreground" }
127+
]},
128+
{ "type": "text", "value": "Engagement exceed targets", "className": "text-xs text-muted-foreground mt-1" }
129+
]
130+
},
131+
{
132+
"type": "card",
133+
"className": "p-6 shadow-sm",
134+
"children": [
135+
{ "type": "div", "className": "flex justify-between items-start mb-2", "children": [
136+
{ "type": "text", "value": "Growth Rate", "className": "text-sm font-medium text-muted-foreground" },
137+
{ "type": "text", "value": "↗ +4.5%", "className": "text-xs font-medium text-foreground bg-secondary px-1.5 py-0.5 rounded-md" }
138+
]},
139+
{ "type": "text", "value": "4.5%", "className": "text-3xl font-bold tracking-tight text-foreground" },
140+
{ "type": "div", "className": "flex items-center mt-4 gap-2", "children": [
141+
{ "type": "icon", "name": "trending-up", "className": "w-4 h-4 text-primary" },
142+
{ "type": "text", "value": "Steady performance increase", "className": "text-xs text-muted-foreground" }
143+
]},
144+
{ "type": "text", "value": "Meets growth projections", "className": "text-xs text-muted-foreground mt-1" }
145+
]
146+
}
147+
]
148+
},
149+
{
150+
"type": "card",
151+
"className": "p-6 shadow-sm",
152+
"title": "Total Visitors",
153+
"description": "Total for the last 3 months",
154+
"headerAction": {
155+
"type": "div",
156+
"className": "flex bg-secondary rounded-md p-0.5",
157+
"children": [
158+
{ "type": "button", "label": "Last 3 months", "variant": "ghost", "size": "sm", "className": "h-7 bg-background shadow-sm text-xs font-medium text-foreground" },
159+
{ "type": "button", "label": "Last 30 days", "variant": "ghost", "size": "sm", "className": "h-7 text-xs font-medium text-muted-foreground" },
160+
{ "type": "button", "label": "Last 7 days", "variant": "ghost", "size": "sm", "className": "h-7 text-xs font-medium text-muted-foreground" }
161+
]
162+
},
163+
"children": [
164+
{
165+
"type": "line-chart",
166+
"height": 300,
167+
"data": [
168+
{ "date": "Apr 7", "Visitors": 240 }, { "date": "Apr 13", "Visitors": 300 }, { "date": "Apr 19", "Visitors": 180 }, { "date": "Apr 26", "Visitors": 400 },
169+
{ "date": "May 2", "Visitors": 320 }, { "date": "May 8", "Visitors": 550 }, { "date": "May 14", "Visitors": 350 }, { "date": "May 21", "Visitors": 600 },
170+
{ "date": "May 28", "Visitors": 450 }, { "date": "Jun 3", "Visitors": 680 }, { "date": "Jun 9", "Visitors": 580 }, { "date": "Jun 15", "Visitors": 720 },
171+
{ "date": "Jun 22", "Visitors": 650 }, { "date": "Jun 30", "Visitors": 800 }
172+
],
173+
"index": "date",
174+
"categories": ["Visitors"],
175+
"colors": ["slate-900"],
176+
"showLegend": false,
177+
"showGridLines": true
178+
}
179+
]
180+
},
181+
{
182+
"type": "div",
183+
"children": [
184+
{
185+
"type": "div",
186+
"className": "flex items-center justify-between mb-4",
187+
"children": [
188+
{ "type": "div", "className": "flex gap-2", "children": [
189+
{ "type": "button", "label": "Outline", "variant": "outline", "className": "font-semibold bg-background text-foreground" },
190+
{ "type": "button", "label": "Past Performance 3", "variant": "ghost", "className": "text-muted-foreground" },
191+
{ "type": "button", "label": "Key Personnel 2", "variant": "ghost", "className": "text-muted-foreground" },
192+
{ "type": "button", "label": "Focus Documents", "variant": "ghost", "className": "text-muted-foreground" }
193+
]},
194+
{ "type": "div", "className": "flex gap-2", "children": [
195+
{ "type": "button", "label": "Customize Columns", "variant": "outline", "icon": "columns", "className": "text-sm h-8" },
196+
{ "type": "button", "label": "Add Section", "variant": "outline", "icon": "plus", "className": "text-sm h-8" }
197+
]}
198+
]
199+
},
200+
{
201+
"type": "card",
202+
"className": "overflow-hidden border shadow-sm p-0",
203+
"children": [
204+
{
205+
"type": "table",
206+
"columns": [
207+
{ "name": "header", "label": "Header" },
208+
{ "name": "type", "label": "Section Type" },
209+
{ "name": "status", "label": "Status" },
210+
{ "name": "target", "label": "Target" },
211+
{ "name": "limit", "label": "Limit" },
212+
{ "name": "reviewer", "label": "Reviewer" },
213+
{ "name": "actions", "label": "" }
214+
],
215+
"data": [
216+
{ "header": "Cover page", "type": "Cover page", "status": "In Process", "target": 18, "limit": 5, "reviewer": "Eddie Lake" },
217+
{ "header": "Table of contents", "type": "Table of contents", "status": "Done", "target": 29, "limit": 24, "reviewer": "Eddie Lake" },
218+
{ "header": "Executive summary", "type": "Narrative", "status": "Done", "target": 10, "limit": 13, "reviewer": "Eddie Lake" }
219+
]
220+
}
221+
]
222+
}
223+
]
224+
}
225+
]
226+
}
227+
]
228+
}
229+
]
230+
}
231+
]
232+
}

‎examples/showcase/app.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"type": "app",
33
"name": "ObjectShowcase",
4-
"title": "Component Showcase",
4+
"title": "Showcase",
55
"logo": "Component",
66
"layout": "sidebar",
77
"menu": [

0 commit comments

Comments
 (0)