create-nextjs-cms 0.9.29 → 0.9.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +71 -71
  3. package/dist/helpers/utils.js +16 -16
  4. package/dist/lib/section-creators.js +166 -166
  5. package/package.json +3 -3
  6. package/templates/default/.eslintrc.json +5 -5
  7. package/templates/default/.prettierignore +7 -7
  8. package/templates/default/.prettierrc.json +27 -27
  9. package/templates/default/CHANGELOG.md +140 -140
  10. package/templates/default/_gitignore +57 -57
  11. package/templates/default/app/(auth)/auth/login/LoginPage.tsx +192 -192
  12. package/templates/default/app/(auth)/auth/login/page.tsx +11 -11
  13. package/templates/default/app/(auth)/auth-language-provider.tsx +34 -34
  14. package/templates/default/app/(auth)/layout.tsx +81 -81
  15. package/templates/default/app/(rootLayout)/admins/page.tsx +10 -10
  16. package/templates/default/app/(rootLayout)/browse/[section]/[page]/page.tsx +22 -22
  17. package/templates/default/app/(rootLayout)/categorized/[section]/page.tsx +15 -15
  18. package/templates/default/app/(rootLayout)/dashboard/page.tsx +70 -70
  19. package/templates/default/app/(rootLayout)/edit/[section]/[itemId]/page.tsx +20 -20
  20. package/templates/default/app/(rootLayout)/layout.tsx +81 -81
  21. package/templates/default/app/(rootLayout)/loading.tsx +10 -10
  22. package/templates/default/app/(rootLayout)/log/page.tsx +7 -7
  23. package/templates/default/app/(rootLayout)/new/[section]/page.tsx +15 -15
  24. package/templates/default/app/(rootLayout)/section/[section]/page.tsx +19 -19
  25. package/templates/default/app/(rootLayout)/settings/page.tsx +13 -13
  26. package/templates/default/app/api/auth/csrf/route.ts +25 -25
  27. package/templates/default/app/api/auth/refresh/route.ts +10 -10
  28. package/templates/default/app/api/auth/route.ts +49 -49
  29. package/templates/default/app/api/auth/session/route.ts +20 -20
  30. package/templates/default/app/api/document/route.ts +165 -165
  31. package/templates/default/app/api/editor/photo/route.ts +49 -49
  32. package/templates/default/app/api/photo/route.ts +27 -27
  33. package/templates/default/app/api/submit/section/item/[slug]/route.ts +95 -95
  34. package/templates/default/app/api/submit/section/item/route.ts +56 -56
  35. package/templates/default/app/api/submit/section/simple/route.ts +86 -86
  36. package/templates/default/app/api/video/route.ts +174 -174
  37. package/templates/default/app/globals.css +236 -236
  38. package/templates/default/cms.config.ts +56 -56
  39. package/templates/default/components/admin/admin-card.tsx +165 -165
  40. package/templates/default/components/admin/admin-edit-page.tsx +124 -124
  41. package/templates/default/components/admin/admin-privilege-card.tsx +184 -184
  42. package/templates/default/components/admin/new-admin-form.tsx +172 -172
  43. package/templates/default/components/container-box.tsx +24 -24
  44. package/templates/default/components/dnd-kit/draggable.tsx +21 -21
  45. package/templates/default/components/dnd-kit/droppable.tsx +20 -20
  46. package/templates/default/components/dnd-kit/sortable-item.tsx +18 -18
  47. package/templates/default/components/feedback/error-component.tsx +16 -16
  48. package/templates/default/components/feedback/info-card.tsx +93 -93
  49. package/templates/default/components/feedback/loading-spinners.tsx +67 -67
  50. package/templates/default/components/feedback/modal.tsx +166 -166
  51. package/templates/default/components/feedback/progress-bar.tsx +48 -48
  52. package/templates/default/components/feedback/tooltip-component.tsx +27 -27
  53. package/templates/default/components/form/form-input-element.tsx +70 -70
  54. package/templates/default/components/form/helpers/_section-hot-reload.js +1 -1
  55. package/templates/default/components/form/helpers/util.ts +17 -17
  56. package/templates/default/components/form/inputs/checkbox-form-input.tsx +46 -46
  57. package/templates/default/components/form/inputs/color-form-input.tsx +44 -44
  58. package/templates/default/components/form/inputs/date-form-input.tsx +93 -93
  59. package/templates/default/components/form/inputs/map-form-input.tsx +141 -141
  60. package/templates/default/components/form/inputs/multiple-select-form-input.tsx +85 -85
  61. package/templates/default/components/form/inputs/number-form-input.tsx +43 -43
  62. package/templates/default/components/form/inputs/password-form-input.tsx +47 -47
  63. package/templates/default/components/form/inputs/photo-form-input.tsx +279 -279
  64. package/templates/default/components/form/inputs/rich-text-form-input.tsx +148 -148
  65. package/templates/default/components/form/inputs/select-form-input.tsx +159 -159
  66. package/templates/default/components/form/inputs/slug-form-input.tsx +131 -131
  67. package/templates/default/components/form/inputs/tags-form-input.tsx +255 -255
  68. package/templates/default/components/form/inputs/text-form-input.tsx +61 -61
  69. package/templates/default/components/form/inputs/textarea-form-input.tsx +61 -61
  70. package/templates/default/components/layout/default-nav-items.tsx +3 -3
  71. package/templates/default/components/layout/layout.tsx +84 -84
  72. package/templates/default/components/layout/navbar.tsx +258 -258
  73. package/templates/default/components/layout/sidebar-dropdown-item.tsx +83 -83
  74. package/templates/default/components/layout/sidebar-item.tsx +24 -24
  75. package/templates/default/components/layout/sidebar.tsx +229 -229
  76. package/templates/default/components/layout/theme-provider.tsx +8 -8
  77. package/templates/default/components/layout/theme-toggle.tsx +39 -39
  78. package/templates/default/components/locale/locale-switcher.tsx +98 -98
  79. package/templates/default/components/media/dropzone.tsx +154 -154
  80. package/templates/default/components/media/protected-document.tsx +44 -44
  81. package/templates/default/components/media/protected-image.tsx +143 -143
  82. package/templates/default/components/media/protected-video.tsx +76 -76
  83. package/templates/default/components/multi-select.tsx +1150 -1150
  84. package/templates/default/components/pages/admins-page.tsx +43 -43
  85. package/templates/default/components/pages/browse-page.tsx +106 -106
  86. package/templates/default/components/pages/categorized-section-page.tsx +31 -31
  87. package/templates/default/components/pages/dashboard-page-alt.tsx +45 -45
  88. package/templates/default/components/pages/item-edit-page.tsx +267 -267
  89. package/templates/default/components/pages/log-page.tsx +107 -107
  90. package/templates/default/components/pages/new-page.tsx +183 -183
  91. package/templates/default/components/pages/section-page.tsx +203 -203
  92. package/templates/default/components/pages/settings-page.tsx +232 -232
  93. package/templates/default/components/pagination/pagination-buttons.tsx +147 -147
  94. package/templates/default/components/pagination/pagination.tsx +36 -36
  95. package/templates/default/components/sections/category-delete-confirm-page.tsx +130 -130
  96. package/templates/default/components/sections/category-section-select-input.tsx +139 -139
  97. package/templates/default/components/sections/conditional-fields.tsx +49 -49
  98. package/templates/default/components/sections/section-icon.tsx +8 -8
  99. package/templates/default/components/sections/section-item-card.tsx +143 -143
  100. package/templates/default/components/sections/section-item-status-badge.tsx +17 -17
  101. package/templates/default/components/sections/select-input-buttons.tsx +125 -125
  102. package/templates/default/components/select-box.tsx +98 -98
  103. package/templates/default/components/ui/accordion.tsx +53 -53
  104. package/templates/default/components/ui/alert-dialog.tsx +113 -113
  105. package/templates/default/components/ui/alert.tsx +47 -47
  106. package/templates/default/components/ui/badge.tsx +38 -38
  107. package/templates/default/components/ui/card.tsx +43 -43
  108. package/templates/default/components/ui/command.tsx +137 -137
  109. package/templates/default/components/ui/custom-alert-dialog.tsx +113 -113
  110. package/templates/default/components/ui/custom-dialog.tsx +123 -123
  111. package/templates/default/components/ui/dialog.tsx +123 -123
  112. package/templates/default/components/ui/direction.tsx +22 -22
  113. package/templates/default/components/ui/dropdown-menu.tsx +182 -182
  114. package/templates/default/components/ui/input-group.tsx +54 -54
  115. package/templates/default/components/ui/input.tsx +22 -22
  116. package/templates/default/components/ui/label.tsx +19 -19
  117. package/templates/default/components/ui/popover.tsx +42 -42
  118. package/templates/default/components/ui/progress.tsx +31 -31
  119. package/templates/default/components/ui/scroll-area.tsx +42 -42
  120. package/templates/default/components/ui/select.tsx +165 -165
  121. package/templates/default/components/ui/separator.tsx +28 -28
  122. package/templates/default/components/ui/sheet.tsx +103 -103
  123. package/templates/default/components/ui/spinner.tsx +16 -16
  124. package/templates/default/components/ui/switch.tsx +29 -29
  125. package/templates/default/components/ui/table.tsx +83 -83
  126. package/templates/default/components/ui/tabs.tsx +55 -55
  127. package/templates/default/components/ui/toast.tsx +113 -113
  128. package/templates/default/components/ui/toaster.tsx +35 -35
  129. package/templates/default/components/ui/tooltip.tsx +30 -30
  130. package/templates/default/components/ui/use-toast.ts +187 -187
  131. package/templates/default/drizzle.config.ts +4 -4
  132. package/templates/default/dynamic-schemas/schema.ts +75 -225
  133. package/templates/default/env/env.ts +46 -46
  134. package/templates/default/envConfig.ts +4 -4
  135. package/templates/default/lib/postinstall.js +14 -14
  136. package/templates/default/lib/utils.ts +6 -6
  137. package/templates/default/next-env.d.ts +6 -6
  138. package/templates/default/next.config.ts +24 -24
  139. package/templates/default/package.json +1 -1
  140. package/templates/default/postcss.config.mjs +6 -6
  141. package/templates/default/proxy.ts +32 -32
  142. package/templates/default/tsconfig.json +48 -48
@@ -1,38 +1,38 @@
1
- import * as React from 'react'
2
- import { Slot } from '@radix-ui/react-slot'
3
- import { cva, type VariantProps } from 'class-variance-authority'
4
-
5
- import { cn } from '@/lib/utils'
6
-
7
- const badgeVariants = cva(
8
- 'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
9
- {
10
- variants: {
11
- variant: {
12
- default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
13
- primary: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
14
- secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
15
- success: 'border-transparent bg-green-500 text-white [a&]:hover:bg-green-600',
16
- destructive:
17
- 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
18
- outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
19
- },
20
- },
21
- defaultVariants: {
22
- variant: 'default',
23
- },
24
- },
25
- )
26
-
27
- function Badge({
28
- className,
29
- variant,
30
- asChild = false,
31
- ...props
32
- }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
33
- const Comp = asChild ? Slot : 'span'
34
-
35
- return <Comp data-slot='badge' className={cn(badgeVariants({ variant }), className)} {...props} />
36
- }
37
-
38
- export { Badge, badgeVariants }
1
+ import * as React from 'react'
2
+ import { Slot } from '@radix-ui/react-slot'
3
+ import { cva, type VariantProps } from 'class-variance-authority'
4
+
5
+ import { cn } from '@/lib/utils'
6
+
7
+ const badgeVariants = cva(
8
+ 'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
9
+ {
10
+ variants: {
11
+ variant: {
12
+ default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
13
+ primary: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
14
+ secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
15
+ success: 'border-transparent bg-green-500 text-white [a&]:hover:bg-green-600',
16
+ destructive:
17
+ 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
18
+ outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
19
+ },
20
+ },
21
+ defaultVariants: {
22
+ variant: 'default',
23
+ },
24
+ },
25
+ )
26
+
27
+ function Badge({
28
+ className,
29
+ variant,
30
+ asChild = false,
31
+ ...props
32
+ }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
33
+ const Comp = asChild ? Slot : 'span'
34
+
35
+ return <Comp data-slot='badge' className={cn(badgeVariants({ variant }), className)} {...props} />
36
+ }
37
+
38
+ export { Badge, badgeVariants }
@@ -1,43 +1,43 @@
1
- import * as React from 'react'
2
-
3
- import { cn } from '@/lib/utils'
4
-
5
- const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
6
- <div ref={ref} className={cn('bg-card text-card-foreground rounded-xl border shadow-sm', className)} {...props} />
7
- ))
8
- Card.displayName = 'Card'
9
-
10
- const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
11
- ({ className, ...props }, ref) => (
12
- <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
13
- ),
14
- )
15
- CardHeader.displayName = 'CardHeader'
16
-
17
- const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
18
- ({ className, ...props }, ref) => (
19
- <h3 ref={ref} className={cn('leading-none font-semibold tracking-tight', className)} {...props} />
20
- ),
21
- )
22
- CardTitle.displayName = 'CardTitle'
23
-
24
- const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
25
- ({ className, ...props }, ref) => (
26
- <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
27
- ),
28
- )
29
- CardDescription.displayName = 'CardDescription'
30
-
31
- const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
32
- ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
33
- )
34
- CardContent.displayName = 'CardContent'
35
-
36
- const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
37
- ({ className, ...props }, ref) => (
38
- <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
39
- ),
40
- )
41
- CardFooter.displayName = 'CardFooter'
42
-
43
- export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
1
+ import * as React from 'react'
2
+
3
+ import { cn } from '@/lib/utils'
4
+
5
+ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
6
+ <div ref={ref} className={cn('bg-card text-card-foreground rounded-xl border shadow-sm', className)} {...props} />
7
+ ))
8
+ Card.displayName = 'Card'
9
+
10
+ const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
11
+ ({ className, ...props }, ref) => (
12
+ <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
13
+ ),
14
+ )
15
+ CardHeader.displayName = 'CardHeader'
16
+
17
+ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
18
+ ({ className, ...props }, ref) => (
19
+ <h3 ref={ref} className={cn('leading-none font-semibold tracking-tight', className)} {...props} />
20
+ ),
21
+ )
22
+ CardTitle.displayName = 'CardTitle'
23
+
24
+ const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
25
+ ({ className, ...props }, ref) => (
26
+ <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
27
+ ),
28
+ )
29
+ CardDescription.displayName = 'CardDescription'
30
+
31
+ const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
32
+ ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
33
+ )
34
+ CardContent.displayName = 'CardContent'
35
+
36
+ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
37
+ ({ className, ...props }, ref) => (
38
+ <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
39
+ ),
40
+ )
41
+ CardFooter.displayName = 'CardFooter'
42
+
43
+ export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
@@ -1,137 +1,137 @@
1
- 'use client'
2
-
3
- import * as React from 'react'
4
- import { Command as CommandPrimitive } from 'cmdk'
5
- import { SearchIcon } from 'lucide-react'
6
-
7
- import { cn } from '@/lib/utils'
8
- import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
9
-
10
- function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
11
- return (
12
- <CommandPrimitive
13
- data-slot='command'
14
- className={cn(
15
- 'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
16
- className,
17
- )}
18
- {...props}
19
- />
20
- )
21
- }
22
-
23
- function CommandDialog({
24
- title = 'Command Palette',
25
- description = 'Search for a command to run...',
26
- children,
27
- className,
28
- showCloseButton = true,
29
- ...props
30
- }: React.ComponentProps<typeof Dialog> & {
31
- title?: string
32
- description?: string
33
- className?: string
34
- showCloseButton?: boolean
35
- }) {
36
- return (
37
- <Dialog {...props}>
38
- <DialogHeader className='sr-only'>
39
- <DialogTitle>{title}</DialogTitle>
40
- <DialogDescription>{description}</DialogDescription>
41
- </DialogHeader>
42
- <DialogContent className={cn('overflow-hidden p-0', className)} showCloseButton={showCloseButton}>
43
- <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
44
- {children}
45
- </Command>
46
- </DialogContent>
47
- </Dialog>
48
- )
49
- }
50
-
51
- function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
52
- return (
53
- <div data-slot='command-input-wrapper' className='flex h-9 items-center gap-2 border-b px-3'>
54
- <SearchIcon className='size-4 shrink-0 opacity-50' />
55
- <CommandPrimitive.Input
56
- data-slot='command-input'
57
- className={cn(
58
- 'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
59
- className,
60
- )}
61
- {...props}
62
- />
63
- </div>
64
- )
65
- }
66
-
67
- function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
68
- return (
69
- <CommandPrimitive.List
70
- data-slot='command-list'
71
- className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
72
- {...props}
73
- />
74
- )
75
- }
76
-
77
- function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
78
- return <CommandPrimitive.Empty data-slot='command-empty' className='py-6 text-center text-sm' {...props} />
79
- }
80
-
81
- function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
82
- return (
83
- <CommandPrimitive.Group
84
- data-slot='command-group'
85
- className={cn(
86
- 'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
87
- className,
88
- )}
89
- {...props}
90
- />
91
- )
92
- }
93
-
94
- function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
95
- return (
96
- <CommandPrimitive.Separator
97
- data-slot='command-separator'
98
- className={cn('bg-border -mx-1 h-px', className)}
99
- {...props}
100
- />
101
- )
102
- }
103
-
104
- function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
105
- return (
106
- <CommandPrimitive.Item
107
- data-slot='command-item'
108
- className={cn(
109
- "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
110
- className,
111
- )}
112
- {...props}
113
- />
114
- )
115
- }
116
-
117
- function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
118
- return (
119
- <span
120
- data-slot='command-shortcut'
121
- className={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
122
- {...props}
123
- />
124
- )
125
- }
126
-
127
- export {
128
- Command,
129
- CommandDialog,
130
- CommandInput,
131
- CommandList,
132
- CommandEmpty,
133
- CommandGroup,
134
- CommandItem,
135
- CommandShortcut,
136
- CommandSeparator,
137
- }
1
+ 'use client'
2
+
3
+ import * as React from 'react'
4
+ import { Command as CommandPrimitive } from 'cmdk'
5
+ import { SearchIcon } from 'lucide-react'
6
+
7
+ import { cn } from '@/lib/utils'
8
+ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
9
+
10
+ function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
11
+ return (
12
+ <CommandPrimitive
13
+ data-slot='command'
14
+ className={cn(
15
+ 'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
16
+ className,
17
+ )}
18
+ {...props}
19
+ />
20
+ )
21
+ }
22
+
23
+ function CommandDialog({
24
+ title = 'Command Palette',
25
+ description = 'Search for a command to run...',
26
+ children,
27
+ className,
28
+ showCloseButton = true,
29
+ ...props
30
+ }: React.ComponentProps<typeof Dialog> & {
31
+ title?: string
32
+ description?: string
33
+ className?: string
34
+ showCloseButton?: boolean
35
+ }) {
36
+ return (
37
+ <Dialog {...props}>
38
+ <DialogHeader className='sr-only'>
39
+ <DialogTitle>{title}</DialogTitle>
40
+ <DialogDescription>{description}</DialogDescription>
41
+ </DialogHeader>
42
+ <DialogContent className={cn('overflow-hidden p-0', className)} showCloseButton={showCloseButton}>
43
+ <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
44
+ {children}
45
+ </Command>
46
+ </DialogContent>
47
+ </Dialog>
48
+ )
49
+ }
50
+
51
+ function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
52
+ return (
53
+ <div data-slot='command-input-wrapper' className='flex h-9 items-center gap-2 border-b px-3'>
54
+ <SearchIcon className='size-4 shrink-0 opacity-50' />
55
+ <CommandPrimitive.Input
56
+ data-slot='command-input'
57
+ className={cn(
58
+ 'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
59
+ className,
60
+ )}
61
+ {...props}
62
+ />
63
+ </div>
64
+ )
65
+ }
66
+
67
+ function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
68
+ return (
69
+ <CommandPrimitive.List
70
+ data-slot='command-list'
71
+ className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
72
+ {...props}
73
+ />
74
+ )
75
+ }
76
+
77
+ function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
78
+ return <CommandPrimitive.Empty data-slot='command-empty' className='py-6 text-center text-sm' {...props} />
79
+ }
80
+
81
+ function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
82
+ return (
83
+ <CommandPrimitive.Group
84
+ data-slot='command-group'
85
+ className={cn(
86
+ 'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
87
+ className,
88
+ )}
89
+ {...props}
90
+ />
91
+ )
92
+ }
93
+
94
+ function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
95
+ return (
96
+ <CommandPrimitive.Separator
97
+ data-slot='command-separator'
98
+ className={cn('bg-border -mx-1 h-px', className)}
99
+ {...props}
100
+ />
101
+ )
102
+ }
103
+
104
+ function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
105
+ return (
106
+ <CommandPrimitive.Item
107
+ data-slot='command-item'
108
+ className={cn(
109
+ "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
110
+ className,
111
+ )}
112
+ {...props}
113
+ />
114
+ )
115
+ }
116
+
117
+ function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
118
+ return (
119
+ <span
120
+ data-slot='command-shortcut'
121
+ className={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
122
+ {...props}
123
+ />
124
+ )
125
+ }
126
+
127
+ export {
128
+ Command,
129
+ CommandDialog,
130
+ CommandInput,
131
+ CommandList,
132
+ CommandEmpty,
133
+ CommandGroup,
134
+ CommandItem,
135
+ CommandShortcut,
136
+ CommandSeparator,
137
+ }