41 lines
1014 B
TypeScript
41 lines
1014 B
TypeScript
import React from "react";
|
|
import Avatar from "../../../components/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
import { MoreHorizontal } from "lucide-react";
|
|
import { Button } from "../../../components/ui/button";
|
|
import type { Player } from "@/server/db/schema";
|
|
|
|
function LobbyPlayerCard({
|
|
player,
|
|
children,
|
|
className,
|
|
}: {
|
|
player: Pick<Player, "displayName" | "avatar">;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"container-bg flex items-center justify-between gap-2 p-4",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Avatar src={player.avatar!} fb={player.displayName!} />
|
|
<h4 className="font-meidum text-xl">{player.displayName}</h4>
|
|
</div>
|
|
{children}
|
|
<Button
|
|
size={"icon"}
|
|
variant={"ghost"}
|
|
className="hover:bg-border/10 hover:text-white"
|
|
>
|
|
<MoreHorizontal />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LobbyPlayerCard;
|