62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Box, Flex, Group, Text, Tooltip } from "@mantine/core";
|
|
import { IconUsersGroup } from "@tabler/icons-react";
|
|
|
|
import { clientApi } from "@homarr/api/client";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
import type { WidgetComponentProps } from "../../definition";
|
|
|
|
export default function MinecraftServerStatusWidget({ options }: WidgetComponentProps<"minecraftServerStatus">) {
|
|
const [{ data }] = clientApi.widget.minecraft.getServerStatus.useSuspenseQuery(options);
|
|
const utils = clientApi.useUtils();
|
|
clientApi.widget.minecraft.subscribeServerStatus.useSubscription(options, {
|
|
onData(data) {
|
|
utils.widget.minecraft.getServerStatus.setData(options, {
|
|
data,
|
|
timestamp: new Date(),
|
|
});
|
|
},
|
|
});
|
|
const tStatus = useScopedI18n("widget.minecraftServerStatus.status");
|
|
|
|
const title = options.title.trim().length > 0 ? options.title : options.domain;
|
|
|
|
return (
|
|
<Flex
|
|
className="minecraftServerStatus-wrapper"
|
|
h="100%"
|
|
w="100%"
|
|
direction="column"
|
|
p="7.5cqmin"
|
|
justify="center"
|
|
align="center"
|
|
>
|
|
<Group gap="5cqmin" wrap="nowrap" align="center">
|
|
<Tooltip label={data.online ? tStatus("online") : tStatus("offline")}>
|
|
<Box w="8cqmin" h="8cqmin" bg={data.online ? "teal" : "red"} style={{ borderRadius: "100%" }}></Box>
|
|
</Tooltip>
|
|
<Text size="10cqmin" fw="bold">
|
|
{title}
|
|
</Text>
|
|
</Group>
|
|
{data.online && (
|
|
<>
|
|
<img
|
|
style={{ flex: 1, transform: "scale(0.8)", objectFit: "contain" }}
|
|
alt={`minecraft icon ${options.domain}`}
|
|
src={data.icon}
|
|
/>
|
|
<Group gap="2cqmin" c="gray.6" align="center">
|
|
<IconUsersGroup style={{ width: "10cqmin", height: "10cqmin" }} />
|
|
<Text size="10cqmin">
|
|
{data.players.online}/{data.players.max}
|
|
</Text>
|
|
</Group>
|
|
</>
|
|
)}
|
|
</Flex>
|
|
);
|
|
}
|