feat: stats changes

This commit is contained in:
dvelo 2025-02-16 14:16:31 -06:00
parent 4082529280
commit e12f9f28b1

@ -6,7 +6,7 @@ import {
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import type { OnlineServer } from "@/lib/types/mh-server"; import type { OnlineServer } from "@/lib/types/mh-server";
import { ChartArea, InfoIcon } from "lucide-react"; import { ChartArea, HardDriveUpload, InfoIcon, Users } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import IconDisplay from "../icons/minecraft-icon-display"; import IconDisplay from "../icons/minecraft-icon-display";
@ -50,21 +50,24 @@ export function Statistics({
return ( return (
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
<Material className="gap-2"> <Material className="gap-3">
<strong className="flex items-center gap-1"> <strong className="justify-between flex items-center">
Total Players <span className="flex items-center gap-1">
<Tooltip> Total Players
<TooltipTrigger> <Tooltip>
<InfoIcon size={14} /> <TooltipTrigger>
</TooltipTrigger> <InfoIcon size={14} />
<TooltipContent> </TooltipTrigger>
For players, the first number represents the current amount of <TooltipContent>
<br /> For players, the first number represents the current amount of
players, while the second one represents the average of the last <br />
<br /> players, while the second one represents the average of the last
100 entries of players. <br />
</TooltipContent> 100 entries of players.
</Tooltip> </TooltipContent>
</Tooltip>
</span>
<Users size={16} className="text-muted-foreground" />
</strong> </strong>
<span className="text-lg flex items-center gap-1"> <span className="text-lg flex items-center gap-1">
<span <span
@ -93,21 +96,31 @@ export function Statistics({
{averagesLoading && <FormSpinner />} {averagesLoading && <FormSpinner />}
</span> </span>
</Material> </Material>
<Material className="gap-2"> <Material className="gap-3">
<strong className="flex items-center gap-1"> <strong className="justify-between flex items-center">
Total Servers <span className="flex items-center gap-1">
<Tooltip> Total Servers
<TooltipTrigger> <Tooltip>
<InfoIcon size={14} /> <TooltipTrigger>
</TooltipTrigger> <InfoIcon size={14} />
<TooltipContent> </TooltipTrigger>
For servers, the first number represents the current amount of <TooltipContent className="max-w-[390px] break-words">
<br /> <p>
servers, while the second one represents the average of the last For servers, the first number represents the current amount of
<br /> servers, while the second one represents the average of the
100 entries of servers. last 100 entries of servers.
</TooltipContent> </p>
</Tooltip> <p className="mt-1">
Minehut automatically puts new servers in a queue once the
total amount of servers is near or at 3.5k for efficiency
reasons. This usually happens during high demand times, most
likely during the American summer, in the afternoon.
</p>
</TooltipContent>
</Tooltip>
</span>
<HardDriveUpload size={16} className="text-muted-foreground" />
</strong> </strong>
<span className="text-lg flex items-center gap-1"> <span className="text-lg flex items-center gap-1">
<span <span
@ -136,7 +149,7 @@ export function Statistics({
{averagesLoading && <FormSpinner />} {averagesLoading && <FormSpinner />}
</span> </span>
</Material> </Material>
<Material className="gap-2"> <Material className="gap-3">
<strong className="justify-between flex items-center"> <strong className="justify-between flex items-center">
Top Server <ChartArea size={16} className="text-muted-foreground" /> Top Server <ChartArea size={16} className="text-muted-foreground" />
</strong>{" "} </strong>{" "}