1
0
Fork 0
panel/components/inspector/UserActions.tsx

100 lines
3.0 KiB
TypeScript

"use client";
import Link from "next/link";
import { Button, buttonVariants } from "../ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "../ui/alert-dialog";
import { Input } from "../ui/input";
import { sendAlert } from "@/lib/actions";
import { useRef } from "react";
export function UserActions({ id }: { id: string }) {
const alertMessage = useRef("");
return (
<div className="flex gap-2">
<Link
className={`flex-1 ${buttonVariants({ variant: "secondary" })}`}
href={`/panel/inspect/account/${id}`}
>
Account
</Link>
<Button className="flex-1 bg-orange-400 hover:bg-orange-300">
Suspend
</Button>
<Button className="flex-1" variant="destructive">
Ban
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="flex-1">
More Options
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<AlertDialog>
<AlertDialogTrigger className="w-full">
<DropdownMenuItem
onClick={() => {
throw "Cancel immediate propagation.";
}}
>
Send Alert
</DropdownMenuItem>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Send Alert</AlertDialogTitle>
<AlertDialogDescription className="flex flex-col gap-2">
<span>
This will send a message from the Platform Moderation
account.
</span>
<Input
placeholder="Enter a message..."
name="message"
onChange={(e) =>
(alertMessage.current = e.currentTarget.value)
}
/>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
if (!alertMessage.current) return;
sendAlert(id, alertMessage.current);
alertMessage.current = "";
}}
>
Send
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<DropdownMenuItem>Inspect Messages</DropdownMenuItem>
<DropdownMenuItem>Wipe Messages</DropdownMenuItem>
<DropdownMenuItem>Clear Friends</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}