Skip to content

Commit cbcbc97

Browse files
imprakharshuklaimprakharshukla
committed
init commit
1 parent 4a33dbe commit cbcbc97

File tree

10 files changed

+1006
-0
lines changed

10 files changed

+1006
-0
lines changed

‎components/ui/alert-dialog.tsx

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
5+
6+
import { cn } from "@/lib/utils"
7+
import { buttonVariants } from "@/components/ui/button"
8+
9+
const AlertDialog = AlertDialogPrimitive.Root
10+
11+
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
12+
13+
const AlertDialogPortal = ({
14+
className,
15+
children,
16+
...props
17+
}: AlertDialogPrimitive.AlertDialogPortalProps) => (
18+
<AlertDialogPrimitive.Portal className={cn(className)} {...props}>
19+
<div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
20+
{children}
21+
</div>
22+
</AlertDialogPrimitive.Portal>
23+
)
24+
AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
25+
26+
const AlertDialogOverlay = React.forwardRef<
27+
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
28+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
29+
>(({ className, children, ...props }, ref) => (
30+
<AlertDialogPrimitive.Overlay
31+
className={cn(
32+
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in",
33+
className
34+
)}
35+
{...props}
36+
ref={ref}
37+
/>
38+
))
39+
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
40+
41+
const AlertDialogContent = React.forwardRef<
42+
React.ElementRef<typeof AlertDialogPrimitive.Content>,
43+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
44+
>(({ className, ...props }, ref) => (
45+
<AlertDialogPortal>
46+
<AlertDialogOverlay />
47+
<AlertDialogPrimitive.Content
48+
ref={ref}
49+
className={cn(
50+
"fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full",
51+
className
52+
)}
53+
{...props}
54+
/>
55+
</AlertDialogPortal>
56+
))
57+
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
58+
59+
const AlertDialogHeader = ({
60+
className,
61+
...props
62+
}: React.HTMLAttributes<HTMLDivElement>) => (
63+
<div
64+
className={cn(
65+
"flex flex-col space-y-2 text-center sm:text-left",
66+
className
67+
)}
68+
{...props}
69+
/>
70+
)
71+
AlertDialogHeader.displayName = "AlertDialogHeader"
72+
73+
const AlertDialogFooter = ({
74+
className,
75+
...props
76+
}: React.HTMLAttributes<HTMLDivElement>) => (
77+
<div
78+
className={cn(
79+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
80+
className
81+
)}
82+
{...props}
83+
/>
84+
)
85+
AlertDialogFooter.displayName = "AlertDialogFooter"
86+
87+
const AlertDialogTitle = React.forwardRef<
88+
React.ElementRef<typeof AlertDialogPrimitive.Title>,
89+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
90+
>(({ className, ...props }, ref) => (
91+
<AlertDialogPrimitive.Title
92+
ref={ref}
93+
className={cn("text-lg font-semibold", className)}
94+
{...props}
95+
/>
96+
))
97+
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
98+
99+
const AlertDialogDescription = React.forwardRef<
100+
React.ElementRef<typeof AlertDialogPrimitive.Description>,
101+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
102+
>(({ className, ...props }, ref) => (
103+
<AlertDialogPrimitive.Description
104+
ref={ref}
105+
className={cn("text-sm text-muted-foreground", className)}
106+
{...props}
107+
/>
108+
))
109+
AlertDialogDescription.displayName =
110+
AlertDialogPrimitive.Description.displayName
111+
112+
const AlertDialogAction = React.forwardRef<
113+
React.ElementRef<typeof AlertDialogPrimitive.Action>,
114+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
115+
>(({ className, ...props }, ref) => (
116+
<AlertDialogPrimitive.Action
117+
ref={ref}
118+
className={cn(buttonVariants(), className)}
119+
{...props}
120+
/>
121+
))
122+
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
123+
124+
const AlertDialogCancel = React.forwardRef<
125+
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
126+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
127+
>(({ className, ...props }, ref) => (
128+
<AlertDialogPrimitive.Cancel
129+
ref={ref}
130+
className={cn(
131+
buttonVariants({ variant: "outline" }),
132+
"mt-2 sm:mt-0",
133+
className
134+
)}
135+
{...props}
136+
/>
137+
))
138+
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
139+
140+
export {
141+
AlertDialog,
142+
AlertDialogTrigger,
143+
AlertDialogContent,
144+
AlertDialogHeader,
145+
AlertDialogFooter,
146+
AlertDialogTitle,
147+
AlertDialogDescription,
148+
AlertDialogAction,
149+
AlertDialogCancel,
150+
}

‎components/ui/alert.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from "react"
2+
import { VariantProps, cva } from "class-variance-authority"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
const alertVariants = cva(
7+
"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
8+
{
9+
variants: {
10+
variant: {
11+
default: "bg-background text-foreground",
12+
destructive:
13+
"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
14+
},
15+
},
16+
defaultVariants: {
17+
variant: "default",
18+
},
19+
}
20+
)
21+
22+
const Alert = React.forwardRef<
23+
HTMLDivElement,
24+
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25+
>(({ className, variant, ...props }, ref) => (
26+
<div
27+
ref={ref}
28+
role="alert"
29+
className={cn(alertVariants({ variant }), className)}
30+
{...props}
31+
/>
32+
))
33+
Alert.displayName = "Alert"
34+
35+
const AlertTitle = React.forwardRef<
36+
HTMLParagraphElement,
37+
React.HTMLAttributes<HTMLHeadingElement>
38+
>(({ className, ...props }, ref) => (
39+
<h5
40+
ref={ref}
41+
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42+
{...props}
43+
/>
44+
))
45+
AlertTitle.displayName = "AlertTitle"
46+
47+
const AlertDescription = React.forwardRef<
48+
HTMLParagraphElement,
49+
React.HTMLAttributes<HTMLParagraphElement>
50+
>(({ className, ...props }, ref) => (
51+
<div
52+
ref={ref}
53+
className={cn("text-sm [&_p]:leading-relaxed", className)}
54+
{...props}
55+
/>
56+
))
57+
AlertDescription.displayName = "AlertDescription"
58+
59+
export { Alert, AlertTitle, AlertDescription }

‎components/ui/avatar.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as AvatarPrimitive from "@radix-ui/react-avatar"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
const Avatar = React.forwardRef<
9+
React.ElementRef<typeof AvatarPrimitive.Root>,
10+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11+
>(({ className, ...props }, ref) => (
12+
<AvatarPrimitive.Root
13+
ref={ref}
14+
className={cn(
15+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16+
className
17+
)}
18+
{...props}
19+
/>
20+
))
21+
Avatar.displayName = AvatarPrimitive.Root.displayName
22+
23+
const AvatarImage = React.forwardRef<
24+
React.ElementRef<typeof AvatarPrimitive.Image>,
25+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26+
>(({ className, ...props }, ref) => (
27+
<AvatarPrimitive.Image
28+
ref={ref}
29+
className={cn("aspect-square h-full w-full", className)}
30+
{...props}
31+
/>
32+
))
33+
AvatarImage.displayName = AvatarPrimitive.Image.displayName
34+
35+
const AvatarFallback = React.forwardRef<
36+
React.ElementRef<typeof AvatarPrimitive.Fallback>,
37+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38+
>(({ className, ...props }, ref) => (
39+
<AvatarPrimitive.Fallback
40+
ref={ref}
41+
className={cn(
42+
"flex h-full w-full items-center justify-center rounded-full bg-muted",
43+
className
44+
)}
45+
{...props}
46+
/>
47+
))
48+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49+
50+
export { Avatar, AvatarImage, AvatarFallback }

‎components/ui/dialog.tsx

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as DialogPrimitive from "@radix-ui/react-dialog"
5+
import { X } from "lucide-react"
6+
7+
import { cn } from "@/lib/utils"
8+
9+
const Dialog = DialogPrimitive.Root
10+
11+
const DialogTrigger = DialogPrimitive.Trigger
12+
13+
const DialogPortal = ({
14+
className,
15+
children,
16+
...props
17+
}: DialogPrimitive.DialogPortalProps) => (
18+
<DialogPrimitive.Portal className={cn(className)} {...props}>
19+
<div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
20+
{children}
21+
</div>
22+
</DialogPrimitive.Portal>
23+
)
24+
DialogPortal.displayName = DialogPrimitive.Portal.displayName
25+
26+
const DialogOverlay = React.forwardRef<
27+
React.ElementRef<typeof DialogPrimitive.Overlay>,
28+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
29+
>(({ className, ...props }, ref) => (
30+
<DialogPrimitive.Overlay
31+
ref={ref}
32+
className={cn(
33+
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
34+
className
35+
)}
36+
{...props}
37+
/>
38+
))
39+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
40+
41+
const DialogContent = React.forwardRef<
42+
React.ElementRef<typeof DialogPrimitive.Content>,
43+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
44+
>(({ className, children, ...props }, ref) => (
45+
<DialogPortal>
46+
<DialogOverlay />
47+
<DialogPrimitive.Content
48+
ref={ref}
49+
className={cn(
50+
"fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
51+
className
52+
)}
53+
{...props}
54+
>
55+
{children}
56+
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
57+
<X className="h-4 w-4" />
58+
<span className="sr-only">Close</span>
59+
</DialogPrimitive.Close>
60+
</DialogPrimitive.Content>
61+
</DialogPortal>
62+
))
63+
DialogContent.displayName = DialogPrimitive.Content.displayName
64+
65+
const DialogHeader = ({
66+
className,
67+
...props
68+
}: React.HTMLAttributes<HTMLDivElement>) => (
69+
<div
70+
className={cn(
71+
"flex flex-col space-y-1.5 text-center sm:text-left",
72+
className
73+
)}
74+
{...props}
75+
/>
76+
)
77+
DialogHeader.displayName = "DialogHeader"
78+
79+
const DialogFooter = ({
80+
className,
81+
...props
82+
}: React.HTMLAttributes<HTMLDivElement>) => (
83+
<div
84+
className={cn(
85+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
86+
className
87+
)}
88+
{...props}
89+
/>
90+
)
91+
DialogFooter.displayName = "DialogFooter"
92+
93+
const DialogTitle = React.forwardRef<
94+
React.ElementRef<typeof DialogPrimitive.Title>,
95+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
96+
>(({ className, ...props }, ref) => (
97+
<DialogPrimitive.Title
98+
ref={ref}
99+
className={cn(
100+
"text-lg font-semibold leading-none tracking-tight",
101+
className
102+
)}
103+
{...props}
104+
/>
105+
))
106+
DialogTitle.displayName = DialogPrimitive.Title.displayName
107+
108+
const DialogDescription = React.forwardRef<
109+
React.ElementRef<typeof DialogPrimitive.Description>,
110+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
111+
>(({ className, ...props }, ref) => (
112+
<DialogPrimitive.Description
113+
ref={ref}
114+
className={cn("text-sm text-muted-foreground", className)}
115+
{...props}
116+
/>
117+
))
118+
DialogDescription.displayName = DialogPrimitive.Description.displayName
119+
120+
export {
121+
Dialog,
122+
DialogTrigger,
123+
DialogContent,
124+
DialogHeader,
125+
DialogFooter,
126+
DialogTitle,
127+
DialogDescription,
128+
}

0 commit comments

Comments
 (0)