The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
update status page
+39
-41
+38
-40
app/(home)/status/cluster.component.tsx
+38
-40
app/(home)/status/cluster.component.tsx
···
1
1
import { Chip } from "@nextui-org/react";
2
2
import Image from "next/image";
3
-
import { ReactNode } from "react";
4
3
import { FaCrown } from "react-icons/fa6";
5
4
import { HiLightningBolt } from "react-icons/hi";
6
5
7
6
import { cn } from "@/utils/cn";
7
+
import { intl } from "@/utils/numbers";
8
8
9
9
import { ApiCluster } from "./api";
10
10
11
11
export function Cluster(cluster: ApiCluster) {
12
12
return (
13
13
<div
14
-
className="p-4 bg-wamellow rounded-lg space-y-2 outline-violet-400 duration-200 h-fit"
14
+
className="w-full md:flex gap-4 space-y-2 md:space-y-0 justify-between items-center p-4 bg-wamellow rounded-lg outline-violet-400 duration-200 h-min"
15
15
id={"cluster-" + cluster.id}
16
16
>
17
17
<div className="sm:flex items-center">
···
25
25
#{cluster.id}
26
26
</span>
27
27
</div>
28
-
29
-
{cluster.id === 0
30
-
? <Chip
31
-
className="mt-1 sm:mt-0 ml-auto"
32
-
startContent={<FaCrown className="ml-1" />}
33
-
color="warning"
34
-
variant="flat"
35
-
>
36
-
master, {cluster.ping}ms
37
-
</Chip>
38
-
: <Chip
39
-
className={cn("ml-auto", cluster.ping > 0 && "text-neutral-400 bg-wamellow")}
40
-
startContent={<HiLightningBolt className="ml-1" />}
41
-
variant="flat"
42
-
color={cluster.ping < 0 ? "danger" : "default"}
43
-
>
44
-
{cluster.ping}ms
45
-
</Chip>
46
-
}
47
28
</div>
48
29
49
-
<div>
50
-
<Row name="memory">
51
-
{cluster.memory}mb
52
-
</Row>
53
-
<Row name="guilds">
54
-
{cluster.guilds}
55
-
</Row>
56
-
<Row name="users">
57
-
{cluster.users}
58
-
</Row>
30
+
<div className="md:flex w-2/3 justify-between text-primary-foreground">
31
+
<div className="md:w-1/4">
32
+
<span className="text-muted-foreground mr-1 text-xs">Uptime:</span>
33
+
{cluster.uptime}
34
+
</div>
35
+
<div className="md:w-1/4">
36
+
<span className="text-muted-foreground mr-1 text-xs">Memory:</span>
37
+
{intl.format(cluster.memory)}mb
38
+
</div>
39
+
<div className="md:w-1/4">
40
+
<span className="text-muted-foreground mr-1 text-xs">Users:</span>
41
+
{intl.format(cluster.users)}
42
+
</div>
43
+
<div className="md:w-1/5">
44
+
<span className="text-muted-foreground mr-1 text-xs">Guilds:</span>
45
+
{intl.format(cluster.guilds)}
46
+
</div>
59
47
</div>
48
+
49
+
{cluster.id === 0
50
+
? <Chip
51
+
className="-mt-2"
52
+
startContent={<FaCrown className="ml-1" />}
53
+
color="warning"
54
+
variant="flat"
55
+
>
56
+
{cluster.ping}ms
57
+
</Chip>
58
+
: <Chip
59
+
className={cn(cluster.ping > 0 && "text-neutral-400 bg-wamellow")}
60
+
startContent={<HiLightningBolt className="ml-1" />}
61
+
variant="flat"
62
+
color={cluster.ping < 0 ? "danger" : "default"}
63
+
>
64
+
{cluster.ping}ms
65
+
</Chip>
66
+
}
60
67
</div>
61
68
);
62
69
}
···
74
81
width={32}
75
82
height={32}
76
83
/>
77
-
);
78
-
}
79
-
80
-
function Row({ name, children }: { name: string; children: ReactNode; }) {
81
-
return (
82
-
<div>
83
-
<span className="text-neutral-300 font-medium">{children}</span>
84
-
{" "}{name}
85
-
</div>
86
84
);
87
85
}
+1
-1
app/(home)/status/page.tsx
+1
-1
app/(home)/status/page.tsx