ppc_amnet/amnet-web/src/components/am-server.tsx

import {useMemo} from "react";
import TimeAgo from "react-timeago";
import {getGameName} from "amnet-shared";
import {useNavigate} from "react-router-dom";
import {Earth, History, Joystick, Trash} from "lucide-react";
import {
    ContextMenu,
    ContextMenuContent,
    ContextMenuItem,
    ContextMenuSeparator,
    ContextMenuTrigger
} from "@/components/ui/context-menu.tsx";

import {AimeServer, db} from "@/lib/database.ts";
import {AMCard, AMCardDetail} from "@/components/am-card.tsx";

export function AMServer(props: { server: AimeServer }) {
    const navigate: (p: string) => void = useNavigate();
    const gameName = useMemo(() => props.server.gameId ? getGameName(props.server.gameId) : null, [props.server.gameId]);

    return (
        <ContextMenu key={props.server.id}>
            <ContextMenuTrigger>
                <AMCard title={props.server.serverName} titlePerformsAction actionClicked={() => navigate(`/servers/${props.server.id}`)}>
                    <AMCardDetail icon={Earth}>
                        <code className="text-ellipsis whitespace-nowrap overflow-hidden">{props.server.serverAddress}</code>
                    </AMCardDetail>
                    <AMCardDetail icon={History}>
                        {props.server.lastConnected > 0 ? <TimeAgo date={props.server.lastConnected}/> :
                            <span>never</span>}
                    </AMCardDetail>
                    {gameName && <AMCardDetail icon={Joystick}>{gameName}</AMCardDetail>}
                </AMCard>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuItem inset onClick={() => navigate(`/servers/${props.server.id}`)}>
                    Select Server
                </ContextMenuItem>
                <ContextMenuSeparator/>
                <ContextMenuItem className="text-red-500" onClick={() => db.servers.delete(props.server.id)}>
                    <Trash className="mr-2 h-4 w-4"/> Remove Server
                </ContextMenuItem>
            </ContextMenuContent>
        </ContextMenu>)
}