The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
prettier status page
+32
-24
+20
-13
app/(home)/status/cluster.component.tsx
+20
-13
app/(home)/status/cluster.component.tsx
···
1
1
import Image from "next/image";
2
+
import type { ReactNode } from "react";
2
3
import { HiLightningBolt } from "react-icons/hi";
3
4
4
5
import { Badge } from "@/components/ui/badge";
···
27
28
</div>
28
29
29
30
<div className="md:flex w-2/3 justify-between text-primary-foreground">
30
-
<div className="md:w-1/4">
31
-
<span className="text-muted-foreground mr-1 text-xs">Uptime:</span>
31
+
<Row name="uptime">
32
32
{cluster.uptime}
33
-
</div>
34
-
<div className="md:w-1/4">
35
-
<span className="text-muted-foreground mr-1 text-xs">Memory:</span>
33
+
</Row>
34
+
<Row name="memory">
36
35
{intl.format(cluster.memory)}mb
37
-
</div>
38
-
<div className="md:w-1/4">
39
-
<span className="text-muted-foreground mr-1 text-xs">Users:</span>
36
+
</Row>
37
+
<Row name="users">
40
38
{intl.format(cluster.users)}
41
-
</div>
42
-
<div className="md:w-1/5">
43
-
<span className="text-muted-foreground mr-1 text-xs">Guilds:</span>
39
+
</Row>
40
+
<Row name="servers" className="w-1/5">
44
41
{intl.format(cluster.guilds)}
45
-
</div>
42
+
</Row>
46
43
</div>
47
44
48
45
<Badge
49
-
className={cn(cluster.ping > 0 && "text-neutral-400 bg-wamellow max-w-1/6")}
46
+
className={cn(cluster.ping > 0 && "max-w-1/6")}
50
47
variant={cluster.ping < 0 ? "destructive" : "default"}
51
48
radius="rounded"
52
49
>
···
70
67
width={32}
71
68
height={32}
72
69
/>
70
+
);
71
+
}
72
+
73
+
74
+
function Row({ name, children, className }: { name: string; children: ReactNode; className?: string; }) {
75
+
return (
76
+
<div className={cn("md:w-1/5", className)}>
77
+
{children}
78
+
<span className="text-muted-foreground mr-1 text-sm">{" "}{name}</span>
79
+
</div>
73
80
);
74
81
}
+3
-3
app/(home)/status/node.component.tsx
+3
-3
app/(home)/status/node.component.tsx
···
20
20
</span>
21
21
</div>
22
22
23
-
<div>
23
+
<div className="text-primary-foreground">
24
24
<Row name="uptime">
25
25
{node.uptime}
26
26
</Row>
···
53
53
function Row({ name, children }: { name: string; children: ReactNode; }) {
54
54
return (
55
55
<div>
56
-
<span className="text-neutral-300 font-medium">{children}</span>
57
-
{" "}{name}
56
+
{children}
57
+
<span className="text-muted-foreground mr-1 text-sm">{" "}{name}</span>
58
58
</div>
59
59
);
60
60
}
+1
-2
app/(home)/status/page.tsx
+1
-2
app/(home)/status/page.tsx
···
16
16
<div className="md:flex gap-4 mb-12">
17
17
{error
18
18
? <Notice message="Failed to fetch cluster status" />
19
-
:
20
-
<div className="space-y-2 w-full md:w-3/4">
19
+
: <div className="space-y-2 w-full md:w-3/4">
21
20
{status.clusters.map((cluster) => (
22
21
<Cluster
23
22
key={"cluster-" + cluster.id}
+1
-1
components/header.tsx
+1
-1
components/header.tsx
···
134
134
size={96}
135
135
/>
136
136
137
-
<p className="mr-1 relative bottom-[1px] truncate block">{user.globalName || user.username}</p>
137
+
<p className="mr-1 relative bottom-[1px] truncate block text-primary-foreground font-medium tracking-tight">{user.globalName || user.username}</p>
138
138
<HiChevronDown />
139
139
</>
140
140
}
+7
-5
components/section.tsx
+7
-5
components/section.tsx
···
5
5
export function Section({
6
6
title,
7
7
showDivider = true,
8
+
tight = false,
8
9
children,
9
10
10
11
className,
···
12
13
}: {
13
14
title: string;
14
15
showDivider?: boolean;
16
+
tight?: boolean;
15
17
children?: React.ReactNode;
16
18
} & React.HTMLAttributes<HTMLDivElement>) {
17
19
return (<>
18
-
{showDivider && <Separator className="mt-12 mb-4" />}
20
+
{showDivider && <Separator className={cn("mb-4 mt-12", tight && "mt-5")} />}
19
21
20
22
<div
21
23
className={cn("mb-3", className)}
22
24
{...props}
23
25
>
24
-
<h3 className="text-xl text-neutral-200">{title}</h3>
26
+
<h3 className="text-xl font-medium tracking-tight text-neutral-200">{title}</h3>
25
27
{children && (
26
-
<p className="dark:text-neutral-500 text-neutral-400">
28
+
<p className="text-muted-foreground">
27
29
{children}
28
30
</p>
29
31
)}
···
43
45
} & React.HTMLAttributes<HTMLDivElement>) {
44
46
return (
45
47
<div {...props}>
46
-
<h3 className="text-medium font-medium text-neutral-300 mt-5">{title}</h3>
47
-
<div className="dark:text-neutral-500 text-neutral-400 mb-3">
48
+
<h3 className="text-medium font-medium tracking-tight text-neutral-300 mt-5">{title}</h3>
49
+
<div className="text-muted-foreground mb-3">
48
50
{description && (
49
51
<div className="mb-3">
50
52
{description}