87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Ban,
|
|
Eye,
|
|
Handshake,
|
|
HeartHandshake,
|
|
MoreHorizontal,
|
|
UserCog,
|
|
UserX,
|
|
} from "lucide-react";
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import type { Player } from "@/server/db/schema";
|
|
import Link from "next/link";
|
|
import { appRoutes } from "@/config/app.routes";
|
|
import { cn } from "@/lib/utils";
|
|
import KickPlayerDialog from "./player-kick-dialog";
|
|
import { api } from "@/trpc/react";
|
|
function LobbyPlayerOptions({
|
|
player,
|
|
lobbyId,
|
|
}: {
|
|
player: Player;
|
|
lobbyId: string;
|
|
}) {
|
|
const [open, setOpen] = React.useState(false);
|
|
const dropdownItemClassName = " flex items-center gap-1 ";
|
|
const changeRole = api.lobby.changeRole.useMutation();
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
size={"icon"}
|
|
variant={"ghost"}
|
|
className="hover:bg-border/10 hover:text-white"
|
|
>
|
|
<MoreHorizontal />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuLabel className="w-32 truncate overflow-hidden font-bold">
|
|
{player.displayName}
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className={dropdownItemClassName} asChild>
|
|
<Link href={appRoutes.playerProfile(player.id)} target="_blank">
|
|
<Eye className="size-4 text-white" />
|
|
View Profile
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className={dropdownItemClassName} asChild>
|
|
<Link href={appRoutes.friend(player.id)} target="_blank">
|
|
<HeartHandshake className="size-4 text-white" />
|
|
My Friend
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className={dropdownItemClassName}>
|
|
<UserCog className="size-4 text-white" />
|
|
Change Role
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={(e) => e.preventDefault()}
|
|
className={cn(
|
|
dropdownItemClassName,
|
|
"group focus:border-destructive focus:text-destructive border border-transparent focus:font-bold",
|
|
)}
|
|
>
|
|
<KickPlayerDialog lobbyId={lobbyId} player={player} />
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
export default LobbyPlayerOptions;
|