Skip to content

Commit a893d9a

Browse files
yashksaini-coderyashksaini-coder
authored
Merge pull request #107 from yashksaini-coder/logout-dialog
feat: ✨ Implement AlertDialog for logout confirmation and remove Auro…
2 parents 7995c8c + fbf4cfe commit a893d9a

File tree

5 files changed

+202
-64
lines changed

5 files changed

+202
-64
lines changed

‎components/dashboardComponents/AppSidebar.tsx

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,18 @@ import { Button } from "@/components/ui/button";
1616
import { cn } from "@/lib/utils";
1717
import { SidebarData } from "@/data/SidebarData";
1818
import { signout } from "@/app/actions/action";
19+
import {
20+
AlertDialog,
21+
AlertDialogAction,
22+
AlertDialogCancel,
23+
AlertDialogContent,
24+
AlertDialogDescription,
25+
AlertDialogFooter,
26+
AlertDialogHeader,
27+
AlertDialogTitle,
28+
AlertDialogTrigger,
29+
} from "@/components/ui/alert-dialog"
30+
1931

2032
export function AppSidebar() {
2133
const { setTheme, theme } = useTheme();
@@ -95,15 +107,23 @@ export function AppSidebar() {
95107
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
96108
<span className="sr-only">Toggle theme</span>
97109
</Button>
98-
<Button
99-
variant="outline"
100-
size="icon"
101-
onClick={handleLogout}
102-
className="rounded-full"
103-
>
104-
<LogOut className="h-[1.2rem] w-[1.2rem]" />
105-
<span className="sr-only">Logout</span>
106-
</Button>
110+
<AlertDialog>
111+
<AlertDialogTrigger>
112+
<LogOut className="cursor-pointer h-[1.8rem] w-[1.8rem] bg-grey " />
113+
</AlertDialogTrigger>
114+
<AlertDialogContent>
115+
<AlertDialogHeader>
116+
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
117+
<AlertDialogDescription>
118+
This action will Logout you from the application.
119+
</AlertDialogDescription>
120+
</AlertDialogHeader>
121+
<AlertDialogFooter>
122+
<AlertDialogCancel>Cancel</AlertDialogCancel>
123+
<AlertDialogAction onClick={handleLogout}>Continue</AlertDialogAction>
124+
</AlertDialogFooter>
125+
</AlertDialogContent>
126+
</AlertDialog>
107127
</div>
108128
</div>
109129
</aside>

‎components/ui/alert-dialog.tsx

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
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 = AlertDialogPrimitive.Portal
14+
15+
const AlertDialogOverlay = React.forwardRef<
16+
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
17+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
18+
>(({ className, ...props }, ref) => (
19+
<AlertDialogPrimitive.Overlay
20+
className={cn(
21+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22+
className
23+
)}
24+
{...props}
25+
ref={ref}
26+
/>
27+
))
28+
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
29+
30+
const AlertDialogContent = React.forwardRef<
31+
React.ElementRef<typeof AlertDialogPrimitive.Content>,
32+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
33+
>(({ className, ...props }, ref) => (
34+
<AlertDialogPortal>
35+
<AlertDialogOverlay />
36+
<AlertDialogPrimitive.Content
37+
ref={ref}
38+
className={cn(
39+
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
</AlertDialogPortal>
45+
))
46+
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
47+
48+
const AlertDialogHeader = ({
49+
className,
50+
...props
51+
}: React.HTMLAttributes<HTMLDivElement>) => (
52+
<div
53+
className={cn(
54+
"flex flex-col space-y-2 text-center sm:text-left",
55+
className
56+
)}
57+
{...props}
58+
/>
59+
)
60+
AlertDialogHeader.displayName = "AlertDialogHeader"
61+
62+
const AlertDialogFooter = ({
63+
className,
64+
...props
65+
}: React.HTMLAttributes<HTMLDivElement>) => (
66+
<div
67+
className={cn(
68+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
69+
className
70+
)}
71+
{...props}
72+
/>
73+
)
74+
AlertDialogFooter.displayName = "AlertDialogFooter"
75+
76+
const AlertDialogTitle = React.forwardRef<
77+
React.ElementRef<typeof AlertDialogPrimitive.Title>,
78+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
79+
>(({ className, ...props }, ref) => (
80+
<AlertDialogPrimitive.Title
81+
ref={ref}
82+
className={cn("text-lg font-semibold", className)}
83+
{...props}
84+
/>
85+
))
86+
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
87+
88+
const AlertDialogDescription = React.forwardRef<
89+
React.ElementRef<typeof AlertDialogPrimitive.Description>,
90+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
91+
>(({ className, ...props }, ref) => (
92+
<AlertDialogPrimitive.Description
93+
ref={ref}
94+
className={cn("text-sm text-muted-foreground", className)}
95+
{...props}
96+
/>
97+
))
98+
AlertDialogDescription.displayName =
99+
AlertDialogPrimitive.Description.displayName
100+
101+
const AlertDialogAction = React.forwardRef<
102+
React.ElementRef<typeof AlertDialogPrimitive.Action>,
103+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
104+
>(({ className, ...props }, ref) => (
105+
<AlertDialogPrimitive.Action
106+
ref={ref}
107+
className={cn(buttonVariants(), className)}
108+
{...props}
109+
/>
110+
))
111+
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112+
113+
const AlertDialogCancel = React.forwardRef<
114+
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
115+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
116+
>(({ className, ...props }, ref) => (
117+
<AlertDialogPrimitive.Cancel
118+
ref={ref}
119+
className={cn(
120+
buttonVariants({ variant: "outline" }),
121+
"mt-2 sm:mt-0",
122+
className
123+
)}
124+
{...props}
125+
/>
126+
))
127+
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128+
129+
export {
130+
AlertDialog,
131+
AlertDialogPortal,
132+
AlertDialogOverlay,
133+
AlertDialogTrigger,
134+
AlertDialogContent,
135+
AlertDialogHeader,
136+
AlertDialogFooter,
137+
AlertDialogTitle,
138+
AlertDialogDescription,
139+
AlertDialogAction,
140+
AlertDialogCancel,
141+
}

‎components/ui/aurora-background.tsx

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎package-lock.json

Lines changed: 30 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@hookform/resolvers": "^3.10.0",
1414
"@prisma/client": "^6.2.1",
1515
"@radix-ui/react-accordion": "^1.2.2",
16+
"@radix-ui/react-alert-dialog": "^1.1.4",
1617
"@radix-ui/react-dialog": "^1.1.4",
1718
"@radix-ui/react-dropdown-menu": "^2.1.4",
1819
"@radix-ui/react-label": "^2.1.1",
@@ -33,8 +34,8 @@
3334
"clsx": "^2.1.1",
3435
"embla-carousel-react": "^8.5.1",
3536
"express": "^4.21.2",
36-
"gray-matter": "^4.0.3",
3737
"framer-motion": "^11.18.0",
38+
"gray-matter": "^4.0.3",
3839
"gsap": "^3.12.7",
3940
"lucide-react": "^0.469.0",
4041
"motion": "^11.17.0",

0 commit comments

Comments
 (0)