Skip to content

Commit e183005

Browse files
git-create-devbengit-create-devben
committed
adjust the components json
1 parent 2f0f0bc commit e183005

File tree

9 files changed

+954
-1
lines changed

9 files changed

+954
-1
lines changed

‎components.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"config": "tailwind.config.js",
88
"css": "app/globals.css",
99
"baseColor": "slate",
10-
"cssVariables": true
10+
"cssVariables": false
1111
},
1212
"aliases": {
1313
"components": "@/components",

‎components/ui/card.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
const Card = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(({ className, ...props }, ref) => (
9+
<div
10+
ref={ref}
11+
className={cn(
12+
"rounded-lg border bg-card text-card-foreground shadow-sm",
13+
className
14+
)}
15+
{...props}
16+
/>
17+
))
18+
Card.displayName = "Card"
19+
20+
const CardHeader = React.forwardRef<
21+
HTMLDivElement,
22+
React.HTMLAttributes<HTMLDivElement>
23+
>(({ className, ...props }, ref) => (
24+
<div
25+
ref={ref}
26+
className={cn("flex flex-col space-y-1.5 p-6", className)}
27+
{...props}
28+
/>
29+
))
30+
CardHeader.displayName = "CardHeader"
31+
32+
const CardTitle = React.forwardRef<
33+
HTMLParagraphElement,
34+
React.HTMLAttributes<HTMLHeadingElement>
35+
>(({ className, ...props }, ref) => (
36+
<h3
37+
ref={ref}
38+
className={cn(
39+
"text-2xl font-semibold leading-none tracking-tight",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
))
45+
CardTitle.displayName = "CardTitle"
46+
47+
const CardDescription = React.forwardRef<
48+
HTMLParagraphElement,
49+
React.HTMLAttributes<HTMLParagraphElement>
50+
>(({ className, ...props }, ref) => (
51+
<p
52+
ref={ref}
53+
className={cn("text-sm text-muted-foreground", className)}
54+
{...props}
55+
/>
56+
))
57+
CardDescription.displayName = "CardDescription"
58+
59+
const CardContent = React.forwardRef<
60+
HTMLDivElement,
61+
React.HTMLAttributes<HTMLDivElement>
62+
>(({ className, ...props }, ref) => (
63+
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64+
))
65+
CardContent.displayName = "CardContent"
66+
67+
const CardFooter = React.forwardRef<
68+
HTMLDivElement,
69+
React.HTMLAttributes<HTMLDivElement>
70+
>(({ className, ...props }, ref) => (
71+
<div
72+
ref={ref}
73+
className={cn("flex items-center p-6 pt-0", className)}
74+
{...props}
75+
/>
76+
))
77+
CardFooter.displayName = "CardFooter"
78+
79+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

‎components/ui/checkbox.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5+
import { Check } from "lucide-react"
6+
7+
import { cn } from "@/lib/utils"
8+
9+
const Checkbox = React.forwardRef<
10+
React.ElementRef<typeof CheckboxPrimitive.Root>,
11+
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12+
>(({ className, ...props }, ref) => (
13+
<CheckboxPrimitive.Root
14+
ref={ref}
15+
className={cn(
16+
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
17+
className
18+
)}
19+
{...props}
20+
>
21+
<CheckboxPrimitive.Indicator
22+
className={cn("flex items-center justify-center text-current")}
23+
>
24+
<Check className="h-4 w-4" />
25+
</CheckboxPrimitive.Indicator>
26+
</CheckboxPrimitive.Root>
27+
))
28+
Checkbox.displayName = CheckboxPrimitive.Root.displayName
29+
30+
export { Checkbox }

‎components/ui/collapsible.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client"
2+
3+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4+
5+
const Collapsible = CollapsiblePrimitive.Root
6+
7+
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8+
9+
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10+
11+
export { Collapsible, CollapsibleTrigger, CollapsibleContent }

‎components/ui/command.tsx

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { DialogProps } from "@radix-ui/react-dialog"
5+
import { Command as CommandPrimitive } from "cmdk"
6+
import { Search } from "lucide-react"
7+
8+
import { cn } from "@/lib/utils"
9+
import { Dialog, DialogContent } from "@/components/ui/dialog"
10+
11+
const Command = React.forwardRef<
12+
React.ElementRef<typeof CommandPrimitive>,
13+
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
14+
>(({ className, ...props }, ref) => (
15+
<CommandPrimitive
16+
ref={ref}
17+
className={cn(
18+
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
19+
className
20+
)}
21+
{...props}
22+
/>
23+
))
24+
Command.displayName = CommandPrimitive.displayName
25+
26+
interface CommandDialogProps extends DialogProps {}
27+
28+
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
29+
return (
30+
<Dialog {...props}>
31+
<DialogContent className="overflow-hidden p-0 shadow-lg">
32+
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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">
33+
{children}
34+
</Command>
35+
</DialogContent>
36+
</Dialog>
37+
)
38+
}
39+
40+
const CommandInput = React.forwardRef<
41+
React.ElementRef<typeof CommandPrimitive.Input>,
42+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
43+
>(({ className, ...props }, ref) => (
44+
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
45+
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
46+
<CommandPrimitive.Input
47+
ref={ref}
48+
className={cn(
49+
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
50+
className
51+
)}
52+
{...props}
53+
/>
54+
</div>
55+
))
56+
57+
CommandInput.displayName = CommandPrimitive.Input.displayName
58+
59+
const CommandList = React.forwardRef<
60+
React.ElementRef<typeof CommandPrimitive.List>,
61+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
62+
>(({ className, ...props }, ref) => (
63+
<CommandPrimitive.List
64+
ref={ref}
65+
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
66+
{...props}
67+
/>
68+
))
69+
70+
CommandList.displayName = CommandPrimitive.List.displayName
71+
72+
const CommandEmpty = React.forwardRef<
73+
React.ElementRef<typeof CommandPrimitive.Empty>,
74+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
75+
>((props, ref) => (
76+
<CommandPrimitive.Empty
77+
ref={ref}
78+
className="py-6 text-center text-sm"
79+
{...props}
80+
/>
81+
))
82+
83+
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
84+
85+
const CommandGroup = React.forwardRef<
86+
React.ElementRef<typeof CommandPrimitive.Group>,
87+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
88+
>(({ className, ...props }, ref) => (
89+
<CommandPrimitive.Group
90+
ref={ref}
91+
className={cn(
92+
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
93+
className
94+
)}
95+
{...props}
96+
/>
97+
))
98+
99+
CommandGroup.displayName = CommandPrimitive.Group.displayName
100+
101+
const CommandSeparator = React.forwardRef<
102+
React.ElementRef<typeof CommandPrimitive.Separator>,
103+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
104+
>(({ className, ...props }, ref) => (
105+
<CommandPrimitive.Separator
106+
ref={ref}
107+
className={cn("-mx-1 h-px bg-border", className)}
108+
{...props}
109+
/>
110+
))
111+
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
112+
113+
const CommandItem = React.forwardRef<
114+
React.ElementRef<typeof CommandPrimitive.Item>,
115+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
116+
>(({ className, ...props }, ref) => (
117+
<CommandPrimitive.Item
118+
ref={ref}
119+
className={cn(
120+
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
121+
className
122+
)}
123+
{...props}
124+
/>
125+
))
126+
127+
CommandItem.displayName = CommandPrimitive.Item.displayName
128+
129+
const CommandShortcut = ({
130+
className,
131+
...props
132+
}: React.HTMLAttributes<HTMLSpanElement>) => {
133+
return (
134+
<span
135+
className={cn(
136+
"ml-auto text-xs tracking-widest text-muted-foreground",
137+
className
138+
)}
139+
{...props}
140+
/>
141+
)
142+
}
143+
CommandShortcut.displayName = "CommandShortcut"
144+
145+
export {
146+
Command,
147+
CommandDialog,
148+
CommandInput,
149+
CommandList,
150+
CommandEmpty,
151+
CommandGroup,
152+
CommandItem,
153+
CommandShortcut,
154+
CommandSeparator,
155+
}

0 commit comments

Comments
 (0)