Skip to content

Commit 021f533

Browse files
hotlonghotlong
committed
Add showcase pages and restructure navigation
Introduces individual JSON page definitions for all components in the showcase, including basic, layout, form, data display, feedback, overlay, disclosure, and complex categories. Updates app.json to organize navigation into nested categories with children. Refactors the index page to a simpler dashboard example.
1 parent 20e4ee2 commit 021f533

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+2007
-328
lines changed

‎examples/showcase/app.json‎

Lines changed: 86 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,105 @@
1111
"icon": "LayoutDashboard"
1212
},
1313
{
14-
"label": "Basic & Layout",
15-
"path": "/basic",
16-
"icon": "Box"
14+
"label": "Basic",
15+
"icon": "Box",
16+
"children": [
17+
{ "label": "Div", "path": "/basic/div" },
18+
{ "label": "Text", "path": "/basic/text" },
19+
{ "label": "Icon", "path": "/basic/icon" },
20+
{ "label": "Image", "path": "/basic/image" },
21+
{ "label": "Separator", "path": "/basic/separator" }
22+
]
1723
},
1824
{
19-
"label": "Forms",
20-
"path": "/forms",
21-
"icon": "FormInput"
25+
"label": "Layout",
26+
"icon": "Layout",
27+
"children": [
28+
{ "label": "Flex", "path": "/layout/flex" },
29+
{ "label": "Grid", "path": "/layout/grid" },
30+
{ "label": "Stack", "path": "/layout/stack" },
31+
{ "label": "Card", "path": "/layout/card" },
32+
{ "label": "Container", "path": "/layout/container" },
33+
{ "label": "Tabs", "path": "/layout/tabs" }
34+
]
35+
},
36+
{
37+
"label": "Form",
38+
"icon": "FormInput",
39+
"children": [
40+
{ "label": "Button", "path": "/form/button" },
41+
{ "label": "Input", "path": "/form/input" },
42+
{ "label": "Textarea", "path": "/form/textarea" },
43+
{ "label": "Select", "path": "/form/select" },
44+
{ "label": "Checkbox", "path": "/form/checkbox" },
45+
{ "label": "Radio Group", "path": "/form/radio-group" },
46+
{ "label": "Switch", "path": "/form/switch" },
47+
{ "label": "Slider", "path": "/form/slider" },
48+
{ "label": "Date Picker", "path": "/form/date-picker" },
49+
{ "label": "Calendar", "path": "/form/calendar" },
50+
{ "label": "Input OTP", "path": "/form/input-otp" },
51+
{ "label": "Toggle", "path": "/form/toggle" },
52+
{ "label": "File Upload", "path": "/form/file-upload" }
53+
]
2254
},
2355
{
2456
"label": "Data Display",
25-
"path": "/data",
26-
"icon": "Table"
57+
"icon": "Table",
58+
"children": [
59+
{ "label": "List", "path": "/data-display/list" },
60+
{ "label": "Avatar", "path": "/data-display/avatar" },
61+
{ "label": "Badge", "path": "/data-display/badge" },
62+
{ "label": "Alert", "path": "/data-display/alert" },
63+
{ "label": "Statistic", "path": "/data-display/statistic" },
64+
{ "label": "Tree View", "path": "/data-display/tree-view" }
65+
]
2766
},
2867
{
2968
"label": "Feedback",
30-
"path": "/feedback",
31-
"icon": "Bell"
69+
"icon": "Bell",
70+
"children": [
71+
{ "label": "Toaster", "path": "/feedback/toaster" },
72+
{ "label": "Progress", "path": "/feedback/progress" },
73+
{ "label": "Skeleton", "path": "/feedback/skeleton" }
74+
]
75+
},
76+
{
77+
"label": "Overlay",
78+
"icon": "Layers",
79+
"children": [
80+
{ "label": "Dialog", "path": "/overlay/dialog" },
81+
{ "label": "Sheet", "path": "/overlay/sheet" },
82+
{ "label": "Drawer", "path": "/overlay/drawer" },
83+
{ "label": "Popover", "path": "/overlay/popover" },
84+
{ "label": "Tooltip", "path": "/overlay/tooltip" },
85+
{ "label": "Hover Card", "path": "/overlay/hover-card" },
86+
{ "label": "Alert Dialog", "path": "/overlay/alert-dialog" },
87+
{ "label": "Dropdown Menu", "path": "/overlay/dropdown-menu" },
88+
{ "label": "Context Menu", "path": "/overlay/context-menu" }
89+
]
3290
},
3391
{
34-
"label": "Overlays",
35-
"path": "/overlays",
36-
"icon": "Layers"
92+
"label": "Disclosure",
93+
"icon": "ChevronRight",
94+
"children": [
95+
{ "label": "Accordion", "path": "/disclosure/accordion" },
96+
{ "label": "Collapsible", "path": "/disclosure/collapsible" }
97+
]
3798
},
3899
{
39100
"label": "Complex",
40-
"path": "/complex",
41-
"icon": "Cpu"
101+
"icon": "Cpu",
102+
"children": [
103+
{ "label": "Data Table", "path": "/complex/data-table" },
104+
{ "label": "Kanban", "path": "/complex/kanban" },
105+
{ "label": "Calendar View", "path": "/complex/calendar-view" },
106+
{ "label": "Timeline", "path": "/complex/timeline" },
107+
{ "label": "Charts", "path": "/complex/charts" },
108+
{ "label": "Carousel", "path": "/complex/carousel" },
109+
{ "label": "Resizable", "path": "/complex/resizable" },
110+
{ "label": "Scroll Area", "path": "/complex/scroll-area" },
111+
{ "label": "Chatbot", "path": "/complex/chatbot" }
112+
]
42113
}
43114
],
44115
"actions": [

‎examples/showcase/pages/basic/div.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"type": "page",
3+
"title": "Div Component",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6",
8+
"children": [
9+
{
10+
"type": "text",
11+
"value": "Div",
12+
"className": "text-3xl font-bold tracking-tight"
13+
},
14+
{
15+
"type": "text",
16+
"value": "Examples of the Div component.",
17+
"className": "text-muted-foreground"
18+
},
19+
{
20+
"type": "card",
21+
"className": "p-6",
22+
"children": [
23+
{
24+
"type": "text",
25+
"value": "TODO: detailed examples for div"
26+
}
27+
]
28+
}
29+
]
30+
}
31+
]
32+
}

‎examples/showcase/pages/basic/icon.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"type": "page",
3+
"title": "Icon Component",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6",
8+
"children": [
9+
{
10+
"type": "text",
11+
"value": "Icon",
12+
"className": "text-3xl font-bold tracking-tight"
13+
},
14+
{
15+
"type": "text",
16+
"value": "Examples of the Icon component.",
17+
"className": "text-muted-foreground"
18+
},
19+
{
20+
"type": "card",
21+
"className": "p-6",
22+
"children": [
23+
{
24+
"type": "text",
25+
"value": "TODO: detailed examples for icon"
26+
}
27+
]
28+
}
29+
]
30+
}
31+
]
32+
}

‎examples/showcase/pages/basic/image.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"type": "page",
3+
"title": "Image Component",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6",
8+
"children": [
9+
{
10+
"type": "text",
11+
"value": "Image",
12+
"className": "text-3xl font-bold tracking-tight"
13+
},
14+
{
15+
"type": "text",
16+
"value": "Examples of the Image component.",
17+
"className": "text-muted-foreground"
18+
},
19+
{
20+
"type": "card",
21+
"className": "p-6",
22+
"children": [
23+
{
24+
"type": "text",
25+
"value": "TODO: detailed examples for image"
26+
}
27+
]
28+
}
29+
]
30+
}
31+
]
32+
}

‎examples/showcase/pages/basic/separator.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"type": "page",
3+
"title": "Separator Component",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6",
8+
"children": [
9+
{
10+
"type": "text",
11+
"value": "Separator",
12+
"className": "text-3xl font-bold tracking-tight"
13+
},
14+
{
15+
"type": "text",
16+
"value": "Examples of the Separator component.",
17+
"className": "text-muted-foreground"
18+
},
19+
{
20+
"type": "card",
21+
"className": "p-6",
22+
"children": [
23+
{
24+
"type": "text",
25+
"value": "TODO: detailed examples for separator"
26+
}
27+
]
28+
}
29+
]
30+
}
31+
]
32+
}

‎examples/showcase/pages/basic/text.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"type": "page",
3+
"title": "Text Component",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6",
8+
"children": [
9+
{
10+
"type": "text",
11+
"value": "Text",
12+
"className": "text-3xl font-bold tracking-tight"
13+
},
14+
{
15+
"type": "text",
16+
"value": "Examples of the Text component.",
17+
"className": "text-muted-foreground"
18+
},
19+
{
20+
"type": "card",
21+
"className": "p-6",
22+
"children": [
23+
{
24+
"type": "text",
25+
"value": "TODO: detailed examples for text"
26+
}
27+
]
28+
}
29+
]
30+
}
31+
]
32+
}

‎examples/showcase/pages/complex/calendar-view.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"type": "page",
3+
"title": "Calendar View Component",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6",
8+
"children": [
9+
{
10+
"type": "text",
11+
"value": "Calendar View",
12+
"className": "text-3xl font-bold tracking-tight"
13+
},
14+
{
15+
"type": "text",
16+
"value": "Examples of the Calendar View component.",
17+
"className": "text-muted-foreground"
18+
},
19+
{
20+
"type": "card",
21+
"className": "p-6",
22+
"children": [
23+
{
24+
"type": "text",
25+
"value": "TODO: detailed examples for calendar-view"
26+
}
27+
]
28+
}
29+
]
30+
}
31+
]
32+
}

‎examples/showcase/pages/complex/carousel.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"type": "page",
3+
"title": "Carousel Component",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6",
8+
"children": [
9+
{
10+
"type": "text",
11+
"value": "Carousel",
12+
"className": "text-3xl font-bold tracking-tight"
13+
},
14+
{
15+
"type": "text",
16+
"value": "Examples of the Carousel component.",
17+
"className": "text-muted-foreground"
18+
},
19+
{
20+
"type": "card",
21+
"className": "p-6",
22+
"children": [
23+
{
24+
"type": "text",
25+
"value": "TODO: detailed examples for carousel"
26+
}
27+
]
28+
}
29+
]
30+
}
31+
]
32+
}

‎examples/showcase/pages/complex/charts.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"type": "page",
3+
"title": "Charts Component",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6",
8+
"children": [
9+
{
10+
"type": "text",
11+
"value": "Charts",
12+
"className": "text-3xl font-bold tracking-tight"
13+
},
14+
{
15+
"type": "text",
16+
"value": "Examples of the Charts component.",
17+
"className": "text-muted-foreground"
18+
},
19+
{
20+
"type": "card",
21+
"className": "p-6",
22+
"children": [
23+
{
24+
"type": "text",
25+
"value": "TODO: detailed examples for charts"
26+
}
27+
]
28+
}
29+
]
30+
}
31+
]
32+
}

0 commit comments

Comments
 (0)