mhsf-dev/src/components/ServerCard.tsx

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuItem,
  ContextMenuContent,
  ContextMenuSeparator,
} from "@/components/ui/context-menu";
import toast, { LoaderIcon } from "react-hot-toast";
import {
  CardHeader,
  CardTitle,
  CardDescription,
  Card,
  CardContent,
} from "./ui/card";
import IconDisplay from "./IconDisplay";
import { TagShower } from "./ServerList";
import {
  ArrowRight,
  ChartArea,
  Copy,
  EllipsisVertical,
  Layers,
  Star,
} from "lucide-react";
import { Button } from "./ui/button";
import {
  Drawer,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { Tooltip } from "@radix-ui/react-tooltip";
import { TooltipContent, TooltipTrigger } from "./ui/tooltip";
import { useRouter } from "@/lib/useRouter";
import Link from "next/link";
import { useState } from "react";
import { favoriteServer, isFavorited } from "@/lib/api";
import { useUser } from "@clerk/nextjs";
import { useTheme } from "next-themes";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import useClipboard from "@/lib/useClipboard";

export default function ServerCard({ b, motd, mini, favs }: any) {
  const router = useRouter();
  const clipboard = useClipboard();
  const [favoriteStar, setFavoriteStar] = useState(false);
  const [favoriteLoading, setFavoriteLoading] = useState(true);
  const { isSignedIn } = useUser();
  const { resolvedTheme } = useTheme();

  return (
    <ContextMenu
      onOpenChange={(open) => {
        if (open && isSignedIn)
          isFavorited(b.name).then((c) => {
            setFavoriteStar(c);
            setFavoriteLoading(false);
          });
      }}
    >
      <ContextMenuTrigger>
        <Card
          key={b.name}
          className={
            (!mini ? "min-h-[450px] max-h-[450px]" : "") +
            " mb-4 flex items-start"
          }
        >
          <CardHeader>
            <CardTitle className="m-0">
              <span>
                <IconDisplay server={b} />
                <HoverCard>
                  <HoverCardTrigger asChild>
                    <Link href={"/server/" + b.name}>
                      <Button
                        variant={"link"}
                        className="text-2xl px-0 pl-1 font-semibold"
                      >
                        {b.name}
                      </Button>
                    </Link>
                  </HoverCardTrigger>
                  <HoverCardContent className="w-80 font-normal tracking-normal">
                    <div className="flex justify-between space-x-4">
                      <div className="space-y-1">
                        <h4 className="text-sm font-semibold">{b.name}</h4>
                        <p className="text-sm">
                          {motd && (
                            <span
                              dangerouslySetInnerHTML={{ __html: motd }}
                              className="w-[30px] text-center break-all overflow-hidden"
                            />
                          )}
                        </p>
                        <div className="flex items-center pt-2">
                          <span className="text-xs text-muted-foreground flex items-center">
                            <ArrowRight size={16} className="mr-2" />
                            Open Server Page
                          </span>
                        </div>
                        <div className="flex items-center pt-2">
                          <span className="text-xs text-muted-foreground flex items-center">
                            <ChartArea size={16} className="mr-2" />
                            Running on{" "}
                            {b.staticInfo.serverPlan == undefined
                              ? "Free Plan"
                              : b.staticInfo.serverPlan}
                          </span>
                        </div>
                      </div>
                    </div>
                  </HoverCardContent>
                </HoverCard>
              </span>
              <Drawer>
                <DrawerTrigger>
                  <Button
                    size="icon"
                    className="w-[24px] h-[24px] ml-2 md:hidden"
                    variant="secondary"
                  >
                    <EllipsisVertical size={16} />
                  </Button>
                </DrawerTrigger>
                <DrawerContent>
                  <DrawerHeader>
                    <DrawerTitle>Actions</DrawerTitle>
                  </DrawerHeader>
                  <DrawerFooter>
                    <Button
                      variant="ghost"
                      onClick={() => {
                        clipboard.writeText(b.name + ".mshf.minehut.gg");
                        toast.success("Copied IP to clipboard");
                      }}
                    >
                      Copy server IP
                      <Copy size={18} className="ml-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      onClick={() => {
                        router.push("/server/" + b.name);
                      }}
                    >
                      Open server page
                    </Button>
                  </DrawerFooter>
                </DrawerContent>
              </Drawer>
              {b.author != undefined ? (
                <div className="text-sm text-muted-foreground font-normal tracking-normal">
                  by {b.author}
                </div>
              ) : (
                <br />
              )}
              <TagShower server={b} />
            </CardTitle>
            <CardDescription className="float-left inline ">
              <span className="flex items-center">
                {b.playerData.playerCount == 0 ? (
                  <div
                    className="items-center border"
                    style={{
                      width: ".5rem",
                      height: ".5rem",
                      borderRadius: "9999px",
                    }}
                  />
                ) : (
                  <div
                    className="items-center"
                    style={{
                      backgroundColor: "#0cce6b",
                      width: ".5rem",
                      height: ".5rem",
                      borderRadius: "9999px",
                    }}
                  />
                )}

                <span className="pl-1">
                  {b.playerData.playerCount}{" "}
                  {b.playerData.playerCount == 1 ? "player" : "players"}{" "}
                  currently online {favs && <>• {favs} favorited</>}
                </span>
              </span>

              <ContextMenu>
                <ContextMenuTrigger>
                  <>
                    <Button
                      size="icon"
                      variant="secondary"
                      className="min-w-[128px] max-w-[328px] h-[32px] mt-2 ml-2 max-md:hidden"
                      onClick={() => {
                        clipboard.writeText(b.name + ".mshf.minehut.gg");
                        toast.success("Copied IP to clipboard");
                      }}
                    >
                      <Copy size={18} />
                      <code className="ml-2">{b.name}</code>
                    </Button>
                    <Tooltip>
                      <TooltipTrigger>
                        <Link href={"/server/" + b.name}>
                          <Button
                            size="icon"
                            variant="secondary"
                            className="w-[32px] h-[32px] mt-2 ml-2 max-md:hidden"
                          >
                            <Layers size={18} />
                          </Button>
                        </Link>
                      </TooltipTrigger>
                      <TooltipContent>
                        Open up the server page to see more information about
                        the server
                      </TooltipContent>
                    </Tooltip>
                  </>
                </ContextMenuTrigger>
                <ContextMenuContent>
                  <ContextMenuItem
                    onClick={() => {
                      clipboard.writeText(b.name + ".mshf.minehut.gg");
                      toast.success("Copied IP to clipboard");
                    }}
                  >
                    Copy server IP
                    <div className="RightSlot">
                      <Copy size={18} />
                    </div>
                  </ContextMenuItem>
                  <ContextMenuSeparator />
                  <Link href={"/server/" + b.name}>
                    <ContextMenuItem>Open server page</ContextMenuItem>
                  </Link>
                </ContextMenuContent>
              </ContextMenu>
            </CardDescription>
            <CardContent>
              {motd && (
                <span
                  dangerouslySetInnerHTML={{ __html: motd }}
                  className="w-[30px] text-center break-all overflow-hidden"
                />
              )}
            </CardContent>
          </CardHeader>
        </Card>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem
          onClick={() => {
            clipboard.writeText(b.name + ".mshf.minehut.gg");
            toast.success("Copied IP to clipboard");
          }}
        >
          Copy server IP
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem
          onClick={() => {
            router.push("/server/" + b.name);
          }}
        >
          Open server page
        </ContextMenuItem>
        <ContextMenuItem
          onClick={() => {
            router.push("/server/" + b.name + "/statistics");
          }}
        >
          Open statistics page
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem
          onClick={() => {
            setFavoriteLoading(true);
            favoriteServer(b.name).then(() => {
              setFavoriteLoading(false);
              setFavoriteStar(!favoriteStar);
            });
          }}
          disabled={!isSignedIn || favoriteLoading}
        >
          {!favoriteLoading && (
            <Star
              size={16}
              className="mr-2 text-white"
              fill={
                favoriteStar
                  ? resolvedTheme == "dark"
                    ? "white"
                    : "black"
                  : "transparent"
              }
            />
          )}{" "}
          {favoriteLoading && <LoaderIcon className="mr-2" />}
          {favoriteStar && isSignedIn ? "Unf" : "F"}avorite Server
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}