Skip to content

Commit 694e8cb

Browse files
tanerengiiintanerengiiin
committed
feat(tailwind): add 3 new components
Compare, CommandMenu and Tag
1 parent 230f5ab commit 694e8cb

31 files changed

Lines changed: 2264 additions & 1 deletion

‎apps/showcase/__store__/index.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3322,6 +3322,54 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
33223322
'filePath': 'demo/tailwind/chip/with-avatar-demo.tsx',
33233323
},
33243324
},
3325+
'commandmenu': {
3326+
'basic-demo': {
3327+
'component': React.lazy(() => import('demo/tailwind/commandmenu/basic-demo')),
3328+
'filePath': 'demo/tailwind/commandmenu/basic-demo.tsx',
3329+
},
3330+
'controlled-demo': {
3331+
'component': React.lazy(() => import('demo/tailwind/commandmenu/controlled-demo')),
3332+
'filePath': 'demo/tailwind/commandmenu/controlled-demo.tsx',
3333+
},
3334+
'custom-demo': {
3335+
'component': React.lazy(() => import('demo/tailwind/commandmenu/custom-demo')),
3336+
'filePath': 'demo/tailwind/commandmenu/custom-demo.tsx',
3337+
},
3338+
'filter-demo': {
3339+
'component': React.lazy(() => import('demo/tailwind/commandmenu/filter-demo')),
3340+
'filePath': 'demo/tailwind/commandmenu/filter-demo.tsx',
3341+
},
3342+
'with-dialog-demo': {
3343+
'component': React.lazy(() => import('demo/tailwind/commandmenu/with-dialog-demo')),
3344+
'filePath': 'demo/tailwind/commandmenu/with-dialog-demo.tsx',
3345+
},
3346+
'with-scrollarea-demo': {
3347+
'component': React.lazy(() => import('demo/tailwind/commandmenu/with-scrollarea-demo')),
3348+
'filePath': 'demo/tailwind/commandmenu/with-scrollarea-demo.tsx',
3349+
},
3350+
},
3351+
'compare': {
3352+
'basic-demo': {
3353+
'component': React.lazy(() => import('demo/tailwind/compare/basic-demo')),
3354+
'filePath': 'demo/tailwind/compare/basic-demo.tsx',
3355+
},
3356+
'chart-demo': {
3357+
'component': React.lazy(() => import('demo/tailwind/compare/chart-demo')),
3358+
'filePath': 'demo/tailwind/compare/chart-demo.tsx',
3359+
},
3360+
'hover-demo': {
3361+
'component': React.lazy(() => import('demo/tailwind/compare/hover-demo')),
3362+
'filePath': 'demo/tailwind/compare/hover-demo.tsx',
3363+
},
3364+
'template-demo': {
3365+
'component': React.lazy(() => import('demo/tailwind/compare/template-demo')),
3366+
'filePath': 'demo/tailwind/compare/template-demo.tsx',
3367+
},
3368+
'vertical-demo': {
3369+
'component': React.lazy(() => import('demo/tailwind/compare/vertical-demo')),
3370+
'filePath': 'demo/tailwind/compare/vertical-demo.tsx',
3371+
},
3372+
},
33253373
'dialog': {
33263374
'basic-demo': {
33273375
'component': React.lazy(() => import('demo/tailwind/dialog/basic-demo')),
@@ -4128,6 +4176,36 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
41284176
'filePath': 'demo/tailwind/tabs/template-demo.tsx',
41294177
},
41304178
},
4179+
'tag': {
4180+
'basic-demo': {
4181+
'component': React.lazy(() => import('demo/tailwind/tag/basic-demo')),
4182+
'filePath': 'demo/tailwind/tag/basic-demo.tsx',
4183+
},
4184+
'button-demo': {
4185+
'component': React.lazy(() => import('demo/tailwind/tag/button-demo')),
4186+
'filePath': 'demo/tailwind/tag/button-demo.tsx',
4187+
},
4188+
'icon-demo': {
4189+
'component': React.lazy(() => import('demo/tailwind/tag/icon-demo')),
4190+
'filePath': 'demo/tailwind/tag/icon-demo.tsx',
4191+
},
4192+
'pill-demo': {
4193+
'component': React.lazy(() => import('demo/tailwind/tag/pill-demo')),
4194+
'filePath': 'demo/tailwind/tag/pill-demo.tsx',
4195+
},
4196+
'severity-demo': {
4197+
'component': React.lazy(() => import('demo/tailwind/tag/severity-demo')),
4198+
'filePath': 'demo/tailwind/tag/severity-demo.tsx',
4199+
},
4200+
'tag-pt': {
4201+
'component': React.lazy(() => import('demo/tailwind/tag/tag-pt')),
4202+
'filePath': 'demo/tailwind/tag/tag-pt.tsx',
4203+
},
4204+
'template-demo': {
4205+
'component': React.lazy(() => import('demo/tailwind/tag/template-demo')),
4206+
'filePath': 'demo/tailwind/tag/template-demo.tsx',
4207+
},
4208+
},
41314209
'textarea': {
41324210
'auto-resize-demo': {
41334211
'component': React.lazy(() => import('demo/tailwind/textarea/auto-resize-demo')),

‎apps/showcase/assets/menu/submenu/menu-tailwind.data.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,10 @@ export const tailwindMenu = [
147147
{
148148
name: 'Breadcrumb',
149149
href: '/docs/tailwind/components/breadcrumb'
150+
},
151+
{
152+
name: 'CommandMenu',
153+
href: '/docs/tailwind/components/commandmenu'
150154
}
151155
]
152156
},
@@ -190,6 +194,10 @@ export const tailwindMenu = [
190194
{
191195
name: 'Carousel',
192196
href: '/docs/tailwind/components/carousel'
197+
},
198+
{
199+
name: 'Compare',
200+
href: '/docs/tailwind/components/compare'
193201
}
194202
]
195203
},
@@ -215,6 +223,10 @@ export const tailwindMenu = [
215223
{
216224
name: 'Skeleton',
217225
href: '/docs/tailwind/components/skeleton'
226+
},
227+
{
228+
name: 'Tag',
229+
href: '/docs/tailwind/components/tag'
218230
}
219231
]
220232
}

‎apps/showcase/demo/tailwind/commandmenu/basic-demo.tsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
'use client';
2+
import { ArrowDown, ArrowUp } from '@primeicons/react';
3+
import { CommandMenu, CommandMenuEmpty, CommandMenuFooter, CommandMenuGroup, CommandMenuGroupHeader, CommandMenuHeader, CommandMenuInput, CommandMenuItem, CommandMenuList } from '@/components/ui/commandmenu';
4+
import type { CommandMenuListInstance } from 'primereact/commandmenu';
5+
6+
export default function BasicDemo() {
7+
return (
8+
<CommandMenu
9+
options={commands}
10+
optionLabel="label"
11+
optionValue="value"
12+
optionGroupLabel="group"
13+
optionGroupChildren="items"
14+
optionKeywords="keywords"
15+
className="mx-auto"
16+
>
17+
<CommandMenuHeader>
18+
<CommandMenuInput placeholder="Search for commands..." />
19+
</CommandMenuHeader>
20+
<CommandMenuEmpty>No results found</CommandMenuEmpty>
21+
<CommandMenuList>
22+
{({ commandmenu }: CommandMenuListInstance) =>
23+
((commandmenu?.filteredOptions ?? []) as typeof commands).map((group, gi) => (
24+
<CommandMenuGroup key={gi}>
25+
<CommandMenuGroupHeader>{group.group}</CommandMenuGroupHeader>
26+
{group.items.map((item, ii) => (
27+
<CommandMenuItem key={ii} option={item}>
28+
{item.label}
29+
</CommandMenuItem>
30+
))}
31+
</CommandMenuGroup>
32+
))
33+
}
34+
</CommandMenuList>
35+
<CommandMenuFooter className="justify-end">
36+
<span className="flex items-center gap-1 text-surface-500 text-xs">
37+
<kbd className="bg-surface-100 dark:bg-surface-800 size-5 inline-flex items-center justify-center rounded border border-surface-200 dark:border-surface-700">
38+
<ArrowUp />
39+
</kbd>
40+
<kbd className="bg-surface-100 dark:bg-surface-800 size-5 inline-flex items-center justify-center rounded border border-surface-200 dark:border-surface-700">
41+
<ArrowDown />
42+
</kbd>
43+
Navigate
44+
</span>
45+
<span className="flex items-center gap-1 text-surface-500 text-xs">
46+
<kbd className="bg-surface-100 dark:bg-surface-800 size-5 inline-flex items-center justify-center rounded border border-surface-200 dark:border-surface-700">
47+
↵
48+
</kbd>
49+
Select
50+
</span>
51+
</CommandMenuFooter>
52+
</CommandMenu>
53+
);
54+
}
55+
56+
const commands = [
57+
{
58+
group: 'recents',
59+
items: [
60+
{ label: 'Check For Updates', value: 'check for updates', keywords: ['check', 'updates'] },
61+
{ label: 'Open Settings', value: 'open settings' },
62+
{ label: 'Search Files', value: 'search files' },
63+
{ label: 'Open Terminal', value: 'open terminal' },
64+
{ label: 'View History', value: 'view history', keywords: ['history', 'recent'] },
65+
{ label: 'Open Chat', value: 'open chat' }
66+
]
67+
},
68+
{
69+
group: 'files',
70+
items: [
71+
{ label: 'New File', value: 'new file' },
72+
{ label: 'New Folder', value: 'new folder' },
73+
{ label: 'Save All', value: 'save-all' },
74+
{ label: 'Change Theme', value: 'change theme' },
75+
{ label: 'Run Task', value: 'run-task' },
76+
{ label: 'Stop Task', value: 'stop task' },
77+
{ label: 'Export Project', value: 'export project' },
78+
{ label: 'Import Project', value: 'import project' },
79+
{ label: 'Delete File', value: 'delete file' },
80+
{ label: 'Duplicate File', value: 'duplicate file' }
81+
]
82+
},
83+
{
84+
group: 'source',
85+
items: [
86+
{ label: 'Git: Commit', value: 'git commit' },
87+
{ label: 'Git: Push', value: 'git push' },
88+
{ label: 'Git: Pull', value: 'git pull' },
89+
{ label: 'Switch Account', value: 'switch account' },
90+
{ label: 'Open Documentation', value: 'open documentation' },
91+
{ label: 'Git: Sync', value: 'git sync' },
92+
{ label: 'Git: Create Branch', value: 'git create branch' },
93+
{ label: 'Git: Create Tag', value: 'git create tag' }
94+
]
95+
},
96+
{
97+
group: 'editor',
98+
items: [
99+
{ label: 'Align Left', value: 'align left' },
100+
{ label: 'Align Center', value: 'align center' },
101+
{ label: 'Align Right', value: 'align right' },
102+
{ label: 'Toggle Bold', value: 'toggle bold' },
103+
{ label: 'Toggle Italic', value: 'toggle italic' },
104+
{ label: 'Insert Link', value: 'insert link' },
105+
{ label: 'Insert Image', value: 'insert image' },
106+
{ label: 'Insert List', value: 'insert list' }
107+
]
108+
},
109+
{
110+
group: 'navigation',
111+
items: [
112+
{ label: 'Go to Home', value: 'go to home' },
113+
{ label: 'Go Back', value: 'go back' },
114+
{ label: 'Go Forward', value: 'go forward' },
115+
{ label: 'Open Explorer', value: 'open explorer' },
116+
{ label: 'View Bookmarks', value: 'view bookmarks' },
117+
{ label: 'Open Minimap', value: 'open minimap' }
118+
]
119+
},
120+
{
121+
group: 'view',
122+
items: [
123+
{ label: 'Toggle Preview', value: 'toggle preview' },
124+
{ label: 'Maximize Window', value: 'maximize window' },
125+
{ label: 'Minimize Window', value: 'minimize window' },
126+
{ label: 'Grid View', value: 'grid view' },
127+
{ label: 'List View', value: 'list view' },
128+
{ label: 'Light Mode', value: 'light mode' },
129+
{ label: 'Dark Mode', value: 'dark mode' }
130+
]
131+
},
132+
{
133+
group: 'tools',
134+
items: [
135+
{ label: 'Open Calculator', value: 'open calculator' },
136+
{ label: 'Open Calendar', value: 'open calendar' },
137+
{ label: 'Open Timer', value: 'open timer' },
138+
{ label: 'View Analytics', value: 'view analytics' },
139+
{ label: 'View Trends', value: 'view trends' },
140+
{ label: 'Open Database', value: 'open database' }
141+
]
142+
}
143+
];

0 commit comments

Comments
 (0)