Skip to content

Commit 2e164a2

Browse files
hpwarehpware
committed
b
1 parent a1159e1 commit 2e164a2

File tree

4 files changed

+196
-41
lines changed

4 files changed

+196
-41
lines changed

‎apps/web/src/app/0-demo/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
*
12
!.gitignore

‎apps/web/src/app/dashboard/user/manage_all/client.tsx‎

Lines changed: 53 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,6 @@ import { useMemo, useState } from "react";
55
import { auth_schema } from "../../../../../../../packages/db/src/index";
66
import DataTable from "@/components/table";
77
import { toast } from "sonner";
8-
import {
9-
User,
10-
Mail,
11-
Shield,
12-
Calendar,
13-
UserStarIcon,
14-
MailCheckIcon,
15-
MailXIcon,
16-
UserMinusIcon,
17-
} from "lucide-react";
188
import {
199
AlertDialog,
2010
AlertDialogAction,
@@ -26,7 +16,28 @@ import {
2616
AlertDialogTitle,
2717
AlertDialogTrigger,
2818
} from "@/components/ui/alert-dialog";
19+
import {
20+
User,
21+
Mail,
22+
Shield,
23+
Calendar,
24+
UserStarIcon,
25+
MailCheckIcon,
26+
MailXIcon,
27+
UserMinusIcon,
28+
} from "lucide-react";
2929
import { Button } from "@/components/ui/button";
30+
import {
31+
Dialog,
32+
DialogClose,
33+
DialogContent,
34+
DialogDescription,
35+
DialogFooter,
36+
DialogHeader,
37+
DialogTitle,
38+
DialogTrigger,
39+
} from "@/components/ui/dialog";
40+
import { Label } from "@/components/ui/label";
3041
import Image from "next/image";
3142
import { Input } from "@/components/ui/input";
3243

@@ -200,52 +211,53 @@ export function Client() {
200211
header: () => <div></div>,
201212
cell: ({ row }) => (
202213
<div className="flex items-center gap-2">
203-
<AlertDialog>
204-
<AlertDialogTrigger asChild>
214+
<Dialog>
215+
<DialogTrigger asChild>
205216
<Button
206217
variant="destructive"
207218
className="cursor-pointer transition-all duration-300 bg-red-600 hover:bg-red-600/70 dark:bg-red-700 dark:hover:bg-red-300/70 text-white"
208219
>
209220
Ban User
210221
</Button>
211-
</AlertDialogTrigger>
212-
<AlertDialogContent>
213-
<AlertDialogHeader>
214-
<AlertDialogTitle>
215-
Are you absolutely sure?
216-
</AlertDialogTitle>
217-
<AlertDialogDescription className="flex flex-col">
218-
<span>Ban Reason</span>
219-
<Input
220-
type="text"
221-
value={banReason}
222-
onChange={(e) => setBanReason(e.target.value)}
223-
/>
224-
<span>
225-
This action can be undone. This will remove the
226-
user's page & login method.
227-
</span>
228-
</AlertDialogDescription>
229-
</AlertDialogHeader>
230-
<AlertDialogFooter className="flex gap-3 sm:justify-end">
231-
<AlertDialogCancel className="mt-0 cursor-pointer transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800">
232-
Cancel
233-
</AlertDialogCancel>
234-
<AlertDialogAction
222+
</DialogTrigger>
223+
<DialogContent>
224+
<DialogHeader>
225+
<DialogTitle>Are you absolutely sure?</DialogTitle>
226+
</DialogHeader>
227+
<span>Ban Reason</span>
228+
<Input
229+
type="text"
230+
value={banReason}
231+
onChange={(e) => setBanReason(e.target.value)}
232+
/>
233+
<DialogDescription className="flex flex-col">
234+
<span>
235+
This action can be undone. This will remove the user's
236+
page & login method.
237+
</span>
238+
</DialogDescription>
239+
<DialogFooter className="flex gap-3 sm:justify-end">
240+
<DialogClose asChild>
241+
<Button variant="outline" className="cursor-pointer">
242+
Cancel
243+
</Button>
244+
</DialogClose>
245+
<Button
235246
className="cursor-pointer transition-all duration-300 bg-red-600 hover:bg-red-600/70 dark:bg-red-700 dark:hover:bg-red-300/70 text-white"
236247
onClick={() => {
237248
submitToServer.mutate({
238249
action: "ban_user",
239250
user: row.original.id,
240-
reason: "spamming",
251+
reason: banReason,
241252
});
253+
setBanReason("");
242254
}}
243255
>
244256
Ban User
245-
</AlertDialogAction>
246-
</AlertDialogFooter>
247-
</AlertDialogContent>
248-
</AlertDialog>
257+
</Button>
258+
</DialogFooter>
259+
</DialogContent>
260+
</Dialog>
249261
<AlertDialog>
250262
<AlertDialogTrigger asChild>
251263
<Button

‎apps/web/src/components/ui/dialog.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import * as React from "react"
2+
import * as DialogPrimitive from "@radix-ui/react-dialog"
3+
import { XIcon } from "lucide-react"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
function Dialog({
8+
...props
9+
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
10+
return <DialogPrimitive.Root data-slot="dialog" {...props} />
11+
}
12+
13+
function DialogTrigger({
14+
...props
15+
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
16+
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
17+
}
18+
19+
function DialogPortal({
20+
...props
21+
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
22+
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
23+
}
24+
25+
function DialogClose({
26+
...props
27+
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
28+
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
29+
}
30+
31+
function DialogOverlay({
32+
className,
33+
...props
34+
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
35+
return (
36+
<DialogPrimitive.Overlay
37+
data-slot="dialog-overlay"
38+
className={cn(
39+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
)
45+
}
46+
47+
function DialogContent({
48+
className,
49+
children,
50+
showCloseButton = true,
51+
...props
52+
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
53+
showCloseButton?: boolean
54+
}) {
55+
return (
56+
<DialogPortal data-slot="dialog-portal">
57+
<DialogOverlay />
58+
<DialogPrimitive.Content
59+
data-slot="dialog-content"
60+
className={cn(
61+
"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
62+
className
63+
)}
64+
{...props}
65+
>
66+
{children}
67+
{showCloseButton && (
68+
<DialogPrimitive.Close
69+
data-slot="dialog-close"
70+
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
71+
>
72+
<XIcon />
73+
<span className="sr-only">Close</span>
74+
</DialogPrimitive.Close>
75+
)}
76+
</DialogPrimitive.Content>
77+
</DialogPortal>
78+
)
79+
}
80+
81+
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
82+
return (
83+
<div
84+
data-slot="dialog-header"
85+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
86+
{...props}
87+
/>
88+
)
89+
}
90+
91+
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
92+
return (
93+
<div
94+
data-slot="dialog-footer"
95+
className={cn(
96+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
97+
className
98+
)}
99+
{...props}
100+
/>
101+
)
102+
}
103+
104+
function DialogTitle({
105+
className,
106+
...props
107+
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
108+
return (
109+
<DialogPrimitive.Title
110+
data-slot="dialog-title"
111+
className={cn("text-lg leading-none font-semibold", className)}
112+
{...props}
113+
/>
114+
)
115+
}
116+
117+
function DialogDescription({
118+
className,
119+
...props
120+
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
121+
return (
122+
<DialogPrimitive.Description
123+
data-slot="dialog-description"
124+
className={cn("text-muted-foreground text-sm", className)}
125+
{...props}
126+
/>
127+
)
128+
}
129+
130+
export {
131+
Dialog,
132+
DialogClose,
133+
DialogContent,
134+
DialogDescription,
135+
DialogFooter,
136+
DialogHeader,
137+
DialogOverlay,
138+
DialogPortal,
139+
DialogTitle,
140+
DialogTrigger,
141+
}

‎bun.lock‎

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

0 commit comments

Comments
 (0)