The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
clean up leaderboard dashboard
+80
-133
+79
-133
app/dashboard/[guildId]/leaderboards/page.tsx
+79
-133
app/dashboard/[guildId]/leaderboards/page.tsx
···
2
2
3
3
import Image from "next/image";
4
4
import { useParams } from "next/navigation";
5
-
import { useCookies } from "next-client-cookies";
6
5
import { HiChartBar, HiViewGridAdd } from "react-icons/hi";
7
6
import { useQuery } from "react-query";
8
7
9
8
import { Guild, guildStore } from "@/common/guilds";
10
9
import ImageUrlInput from "@/components/inputs/image-url-input";
11
10
import MultiSelectMenu from "@/components/inputs/multi-select-menu";
12
-
import TextInput from "@/components/inputs/text-input";
13
11
import { ScreenMessage } from "@/components/screen-message";
14
12
import { Section, SubSection } from "@/components/section";
15
13
import { cacheOptions, getData } from "@/lib/api";
···
23
21
import DiscordWidget from "./widget.component";
24
22
25
23
export default function Home() {
26
-
const cookies = useCookies();
27
-
28
24
const guild = guildStore((g) => g);
29
25
const params = useParams();
30
26
···
59
55
60
56
if (isLoading || !data) return <></>;
61
57
62
-
return (
63
-
<div>
64
-
65
-
<div className="flex flex-col-reverse md:flex-row gap-6">
66
-
<div>
67
-
title="View Leaderboard"
68
-
message="Easily access and view the top chatters, voice timers, and inviters from this server in the web."
69
-
url={`/leaderboard/${params.guildId}`}
70
-
icon={<HiChartBar />}
71
-
/>
72
-
73
-
{cookies.get("devTools") &&
74
-
<div className={"flex gap-4 border-2 border-violet-400 p-4 mb-4 rounded-lg"}>
75
-
76
-
<div className="lg:w-1/2 flex gap-2 w-full">
77
-
78
-
<div className="w-1/2">
79
-
<TextInput
80
-
name="Text"
81
-
url={url}
82
-
dataName="textColor"
83
-
description="Color used for text."
84
-
type="color"
85
-
defaultState={data.textColor ?? 0xe5e5e5}
86
-
resetState={0xe5e5e5}
87
-
/>
88
-
</div>
89
-
90
-
<div className="w-1/2">
91
-
<TextInput
92
-
name="Accent"
93
-
url={url}
94
-
dataName="accentColor"
95
-
description="Color used for secondary text."
96
-
type="color"
97
-
defaultState={data.accentColor ?? 0x8b5cf6}
98
-
resetState={0x8b5cf6}
99
-
/>
100
-
</div>
101
-
102
-
</div>
103
-
104
-
<div className="w-1/2">
105
-
<TextInput
106
-
name="Background"
107
-
url={url}
108
-
dataName="backgroundColor"
109
-
description="Color used for the background."
110
-
type="color"
111
-
defaultState={data.backgroundColor ?? 0x0d0f11}
112
-
resetState={0x0d0f11}
113
-
/>
114
-
</div>
115
-
116
-
</div>
117
-
}
118
-
119
-
<ImageUrlInput
120
-
name="Banner"
121
-
url={url}
122
-
ratio="aspect-[4/1]"
123
-
dataName="banner"
124
-
description="Enter a url which should be the banner of the leaderboard web page. The recomended image ration is 4:1 and recommended resolution 1024x256px."
125
-
defaultState={data.bannerUrl || ""}
126
-
/>
127
-
</div>
128
-
129
-
<Permissions
130
-
className="w-full md:w-1/3 lg:w-1/4 shrink-0"
131
-
guild={guild}
58
+
return (<>
59
+
<div className="flex flex-col-reverse md:flex-row gap-6">
60
+
<div>
132
61
<OverviewLink
62
+
title="View Leaderboard"
63
+
message="Easily access and view the top chatters, voice timers, and inviters from this server in the web."
64
+
url={`/leaderboard/${params.guildId}`}
65
+
icon={<HiChartBar />}
133
66
/>
134
67
68
+
<ImageUrlInput
69
+
name="Banner"
70
+
url={url}
71
+
ratio="aspect-[4/1]"
72
+
dataName="banner"
73
+
description="Enter a url which should be the banner of the leaderboard web page. The recomended image ration is 4:1 and recommended resolution 1024x256px."
74
+
defaultState={data.bannerUrl || ""}
75
+
/>
135
76
</div>
136
77
137
-
<Section
138
-
title="Roles"
139
-
>
140
-
Select roles which should be assigned to the top members. (left to right - 1st to 3rd place)
141
-
</Section>
78
+
<Permissions
79
+
className="w-full md:w-1/3 lg:w-1/4 shrink-0"
80
+
guild={guild}
81
+
/>
82
+
</div>
142
83
143
-
<div className="lg:flex gap-3 mt-5">
144
-
<div className="lg:w-1/2">
145
-
<MultiSelectMenu
146
-
name="Top messager roles"
147
-
url={url}
148
-
dataName="roles.messages"
149
-
items={guild?.roles?.sort((a, b) => b.position - a.position).map((r) => ({ name: `@${r.name}`, value: r.id, error: r.missingPermissions.join(", "), color: r.color }))}
150
-
description="Select roles which should be assigned to the top message members."
151
-
defaultState={data.roles?.messages || []}
152
-
max={3}
153
-
/>
154
-
</div>
155
-
<div className="lg:w-1/2">
156
-
<MultiSelectMenu
157
-
name="Top voice roles"
158
-
url={url}
159
-
dataName="roles.voiceminutes"
160
-
items={guild?.roles?.sort((a, b) => b.position - a.position).map((r) => ({ name: `@${r.name}`, value: r.id, error: r.missingPermissions.join(", "), color: r.color }))}
161
-
description="Select roles which should be assigned to the top voice members."
162
-
defaultState={data.roles?.voiceminutes || []}
163
-
max={3}
164
-
/>
165
-
</div>
84
+
<Section
85
+
title="Roles"
86
+
>
87
+
Select roles which should be assigned to the top members. (left to right - 1st to 3rd place)
88
+
</Section>
89
+
90
+
<div className="lg:flex gap-3 mt-5">
91
+
<div className="lg:w-1/2">
92
+
<MultiSelectMenu
93
+
name="Top messager roles"
94
+
url={url}
95
+
dataName="roles.messages"
96
+
items={guild?.roles?.sort((a, b) => b.position - a.position).map((r) => ({ name: `@${r.name}`, value: r.id, error: r.missingPermissions.join(", "), color: r.color }))}
97
+
description="Select roles which should be assigned to the top message members."
98
+
defaultState={data.roles?.messages || []}
99
+
max={3}
100
+
/>
166
101
</div>
167
-
168
102
<div className="lg:w-1/2">
169
103
<MultiSelectMenu
170
-
name="Blacklisted channels"
104
+
name="Top voice roles"
171
105
url={url}
172
-
dataName="blacklistChannelIds"
173
-
items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => ({ name: `#${c.name}`, value: c.id }))}
174
-
description="Select channels which should not be able to be counted."
175
-
defaultState={data.blacklistChannelIds || []}
176
-
max={500}
106
+
dataName="roles.voiceminutes"
107
+
items={guild?.roles?.sort((a, b) => b.position - a.position).map((r) => ({ name: `@${r.name}`, value: r.id, error: r.missingPermissions.join(", "), color: r.color }))}
108
+
description="Select roles which should be assigned to the top voice members."
109
+
defaultState={data.roles?.voiceminutes || []}
110
+
max={3}
177
111
/>
178
112
</div>
113
+
</div>
179
114
180
-
<Section
181
-
title="Updating"
182
-
>
183
-
These leaderboards will be sent in a channel and update roughly every 20 minutes.
184
-
</Section>
115
+
<div className="lg:w-1/2">
116
+
<MultiSelectMenu
117
+
name="Blacklisted channels"
118
+
url={url}
119
+
dataName="blacklistChannelIds"
120
+
items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => ({ name: `#${c.name}`, value: c.id }))}
121
+
description="Select channels which should not be able to be counted."
122
+
defaultState={data.blacklistChannelIds || []}
123
+
max={500}
124
+
/>
125
+
</div>
185
126
186
-
<div className="w-full grid gap-4 md:flex md:gap-0 md:items-center my-10">
187
-
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "messages")} type="messages" />
188
-
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "voiceminutes")} type="voiceminutes" />
189
-
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "invites")} type="invites" />
190
-
</div>
127
+
<Section
128
+
title="Updating"
129
+
>
130
+
These leaderboards will be sent in a channel and update roughly every 20 minutes.
131
+
</Section>
132
+
133
+
<div className="w-full grid gap-4 md:flex md:gap-0 md:items-center my-10">
134
+
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "messages")} type="messages" />
135
+
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "voiceminutes")} type="voiceminutes" />
136
+
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "invites")} type="invites" />
137
+
</div>
191
138
192
139
193
-
<Section
194
-
title="Privacy"
195
-
>
196
-
Manage the privacy of the leaderboard.
197
-
</Section>
140
+
<Section
141
+
title="Privacy"
142
+
>
143
+
Manage the privacy of the leaderboard.
144
+
</Section>
198
145
199
-
<DiscordWidget guild={guild as Guild} />
146
+
<DiscordWidget guild={guild as Guild} />
200
147
201
-
<SubSection
202
-
title="Removal"
203
-
description="Reset the leaderboard to start fresh. This action cannot be undone"
204
-
>
205
-
<ResetLeaderboard guild={guild as Guild} />
206
-
</SubSection>
148
+
<SubSection
149
+
title="Removal"
150
+
description="Reset the leaderboard to start fresh. This action cannot be undone"
151
+
>
152
+
<ResetLeaderboard guild={guild as Guild} />
153
+
</SubSection>
207
154
208
-
</div >
209
-
);
155
+
</>);
210
156
}