The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add chadcn/ui components
+266
+33
components/ui/badge.tsx
+33
components/ui/badge.tsx
···
1
+
import * as React from "react"
2
+
import { cva, type VariantProps } from "class-variance-authority"
3
+
4
+
import { cn } from "@/utils/cn"
5
+
6
+
const badgeVariants = cva(
7
+
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8
+
{
9
+
variants: {
10
+
variant: {
11
+
default: "border-transparent bg-primary/10 text-primary-foreground hover:bg-primary/5",
12
+
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
13
+
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
14
+
outline: "text-foreground",
15
+
},
16
+
},
17
+
defaultVariants: {
18
+
variant: "default",
19
+
},
20
+
}
21
+
)
22
+
23
+
export interface BadgeProps
24
+
extends React.HTMLAttributes<HTMLDivElement>,
25
+
VariantProps<typeof badgeVariants> { }
26
+
27
+
function Badge({ className, variant, ...props }: BadgeProps) {
28
+
return (
29
+
<div className={cn(badgeVariants({ variant }), className)} {...props} />
30
+
)
31
+
}
32
+
33
+
export { Badge, badgeVariants }
+118
components/ui/drawer.tsx
+118
components/ui/drawer.tsx
···
1
+
"use client"
2
+
3
+
import * as React from "react"
4
+
import { Drawer as DrawerPrimitive } from "vaul"
5
+
6
+
import { cn } from "@/utils/cn"
7
+
8
+
const Drawer = ({
9
+
shouldScaleBackground = true,
10
+
...props
11
+
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
12
+
<DrawerPrimitive.Root
13
+
shouldScaleBackground={shouldScaleBackground}
14
+
{...props}
15
+
/>
16
+
)
17
+
Drawer.displayName = "Drawer"
18
+
19
+
const DrawerTrigger = DrawerPrimitive.Trigger
20
+
21
+
const DrawerPortal = DrawerPrimitive.Portal
22
+
23
+
const DrawerClose = DrawerPrimitive.Close
24
+
25
+
const DrawerOverlay = React.forwardRef<
26
+
React.ElementRef<typeof DrawerPrimitive.Overlay>,
27
+
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
28
+
>(({ className, ...props }, ref) => (
29
+
<DrawerPrimitive.Overlay
30
+
ref={ref}
31
+
className={cn("fixed inset-0 z-50 bg-black/80", className)}
32
+
{...props}
33
+
/>
34
+
))
35
+
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
36
+
37
+
const DrawerContent = React.forwardRef<
38
+
React.ElementRef<typeof DrawerPrimitive.Content>,
39
+
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
40
+
>(({ className, children, ...props }, ref) => (
41
+
<DrawerPortal>
42
+
<DrawerOverlay />
43
+
<DrawerPrimitive.Content
44
+
ref={ref}
45
+
className={cn(
46
+
"fixed inset-x-0 bottom-0 z-50 mt-24 mx-1 px-4 pb-4 flex h-auto flex-col bg-popover/75 backdrop-blur-md rounded-xl shadow-md",
47
+
className
48
+
)}
49
+
{...props}
50
+
>
51
+
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
52
+
{children}
53
+
</DrawerPrimitive.Content>
54
+
</DrawerPortal>
55
+
))
56
+
DrawerContent.displayName = "DrawerContent"
57
+
58
+
const DrawerHeader = ({
59
+
className,
60
+
...props
61
+
}: React.HTMLAttributes<HTMLDivElement>) => (
62
+
<div
63
+
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
64
+
{...props}
65
+
/>
66
+
)
67
+
DrawerHeader.displayName = "DrawerHeader"
68
+
69
+
const DrawerFooter = ({
70
+
className,
71
+
...props
72
+
}: React.HTMLAttributes<HTMLDivElement>) => (
73
+
<div
74
+
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
75
+
{...props}
76
+
/>
77
+
)
78
+
DrawerFooter.displayName = "DrawerFooter"
79
+
80
+
const DrawerTitle = React.forwardRef<
81
+
React.ElementRef<typeof DrawerPrimitive.Title>,
82
+
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
83
+
>(({ className, ...props }, ref) => (
84
+
<DrawerPrimitive.Title
85
+
ref={ref}
86
+
className={cn(
87
+
"text-lg font-semibold leading-none tracking-tight",
88
+
className
89
+
)}
90
+
{...props}
91
+
/>
92
+
))
93
+
DrawerTitle.displayName = DrawerPrimitive.Title.displayName
94
+
95
+
const DrawerDescription = React.forwardRef<
96
+
React.ElementRef<typeof DrawerPrimitive.Description>,
97
+
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
98
+
>(({ className, ...props }, ref) => (
99
+
<DrawerPrimitive.Description
100
+
ref={ref}
101
+
className={cn("text-sm text-muted-foreground", className)}
102
+
{...props}
103
+
/>
104
+
))
105
+
DrawerDescription.displayName = DrawerPrimitive.Description.displayName
106
+
107
+
export {
108
+
Drawer,
109
+
DrawerPortal,
110
+
DrawerOverlay,
111
+
DrawerTrigger,
112
+
DrawerClose,
113
+
DrawerContent,
114
+
DrawerHeader,
115
+
DrawerFooter,
116
+
DrawerTitle,
117
+
DrawerDescription,
118
+
}
+31
components/ui/popover.tsx
+31
components/ui/popover.tsx
···
1
+
"use client"
2
+
3
+
import * as React from "react"
4
+
import * as PopoverPrimitive from "@radix-ui/react-popover"
5
+
6
+
import { cn } from "@/utils/cn"
7
+
8
+
const Popover = PopoverPrimitive.Root
9
+
10
+
const PopoverTrigger = PopoverPrimitive.Trigger
11
+
12
+
const PopoverContent = React.forwardRef<
13
+
React.ElementRef<typeof PopoverPrimitive.Content>,
14
+
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15
+
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16
+
<PopoverPrimitive.Portal>
17
+
<PopoverPrimitive.Content
18
+
ref={ref}
19
+
align={align}
20
+
sideOffset={sideOffset}
21
+
className={cn(
22
+
"z-50 w-72 rounded-md border bg-popover/50 backdrop-blur-md p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23
+
className
24
+
)}
25
+
{...props}
26
+
/>
27
+
</PopoverPrimitive.Portal>
28
+
))
29
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName
30
+
31
+
export { Popover, PopoverTrigger, PopoverContent }
+31
components/ui/separator.tsx
+31
components/ui/separator.tsx
···
1
+
"use client"
2
+
3
+
import * as React from "react"
4
+
import * as SeparatorPrimitive from "@radix-ui/react-separator"
5
+
6
+
import { cn } from "@/utils/cn"
7
+
8
+
const Separator = React.forwardRef<
9
+
React.ElementRef<typeof SeparatorPrimitive.Root>,
10
+
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11
+
>(
12
+
(
13
+
{ className, orientation = "horizontal", decorative = true, ...props },
14
+
ref
15
+
) => (
16
+
<SeparatorPrimitive.Root
17
+
ref={ref}
18
+
decorative={decorative}
19
+
orientation={orientation}
20
+
className={cn(
21
+
"shrink-0 bg-border",
22
+
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23
+
className
24
+
)}
25
+
{...props}
26
+
/>
27
+
)
28
+
)
29
+
Separator.displayName = SeparatorPrimitive.Root.displayName
30
+
31
+
export { Separator }