The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
improve starboard config preview
+220
-195
+220
-195
app/dashboard/[guildId]/starboard/page.tsx
+220
-195
app/dashboard/[guildId]/starboard/page.tsx
···
46
46
const [example, setExample] = useState({
47
47
avatar: "https://cdn.waya.one/r/823554a71e92ca6192ab500d9b597a7f.png",
48
48
username: "@spacewolf.",
49
-
color: 0,
50
-
emoji: ""
49
+
color: 0
51
50
});
52
51
53
52
const handleUserStyle = (value: number) => {
···
110
109
111
110
if (isLoading || !data) return <></>;
112
111
113
-
return (
114
-
<>
112
+
return (<>
115
113
116
-
<div className="flex justify-between relative bottom-2 mb-3">
117
-
<Button
118
-
className="ml-auto"
119
-
as={Link}
120
-
href="/docs/starboard"
121
-
target="_blank"
122
-
endContent={<HiExternalLink />}
123
-
size="sm"
124
-
>
125
-
Read docs
126
-
</Button>
127
-
</div>
114
+
<div className="flex justify-between relative bottom-2 mb-3">
115
+
<Button
116
+
className="ml-auto"
117
+
as={Link}
118
+
href="/docs/starboard"
119
+
target="_blank"
120
+
endContent={<HiExternalLink />}
121
+
size="sm"
122
+
>
123
+
Read docs
124
+
</Button>
125
+
</div>
128
126
129
-
<Switch
130
-
name="Starboard module enabled"
131
-
url={url}
132
-
dataName="enabled"
133
-
defaultState={data.enabled || false}
134
-
disabled={false}
135
-
onSave={handleSwitchToggle}
136
-
/>
127
+
<Switch
128
+
name="Starboard module enabled"
129
+
url={url}
130
+
dataName="enabled"
131
+
defaultState={data.enabled || false}
132
+
disabled={false}
133
+
onSave={handleSwitchToggle}
134
+
/>
137
135
138
-
<Switch
139
-
name="Allow bots, apps and webhooks"
140
-
url={url}
141
-
dataName="allowBots"
142
-
defaultState={data.allowBots || false}
143
-
disabled={!data.enabled}
144
-
/>
136
+
<Switch
137
+
name="Allow bots, apps and webhooks"
138
+
url={url}
139
+
dataName="allowBots"
140
+
defaultState={data.allowBots || false}
141
+
disabled={!data.enabled}
142
+
/>
145
143
146
-
<Switch
147
-
name="Allow NSFW channels"
148
-
url={url}
149
-
dataName="allowNSFW"
150
-
defaultState={data.allowNSFW || false}
151
-
disabled={!data.enabled}
152
-
/>
144
+
<Switch
145
+
name="Allow NSFW channels"
146
+
url={url}
147
+
dataName="allowNSFW"
148
+
defaultState={data.allowNSFW || false}
149
+
disabled={!data.enabled}
150
+
/>
153
151
154
-
<Switch
155
-
name="Allow message edits"
156
-
description="If a message is being edited, update it in the data."
157
-
url={url}
158
-
dataName="allowEdits"
159
-
defaultState={data.allowEdits || false}
160
-
disabled={!data.enabled}
161
-
/>
152
+
<Switch
153
+
name="Allow message edits"
154
+
description="If a message is being edited, update it in the data."
155
+
url={url}
156
+
dataName="allowEdits"
157
+
defaultState={data.allowEdits || false}
158
+
disabled={!data.enabled}
159
+
/>
162
160
163
-
<Switch
164
-
name="Allow author reaction"
165
-
description="Lets the message author star their own messages."
166
-
url={url}
167
-
dataName="allowSelfReact"
168
-
defaultState={data.allowSelfReact || false}
169
-
disabled={!data.enabled}
170
-
/>
161
+
<Switch
162
+
name="Allow author reaction"
163
+
description="Lets the message author star their own messages."
164
+
url={url}
165
+
dataName="allowSelfReact"
166
+
defaultState={data.allowSelfReact || false}
167
+
disabled={!data.enabled}
168
+
/>
171
169
172
-
<Switch
173
-
name="Display stared message reference"
174
-
description="Repost the message reply in the data."
175
-
url={url}
176
-
dataName="displayReference"
177
-
defaultState={data.displayReference || false}
178
-
disabled={!data.enabled}
179
-
/>
170
+
<Switch
171
+
name="Display stared message reference"
172
+
description="Repost the message reply in the data."
173
+
url={url}
174
+
dataName="displayReference"
175
+
defaultState={data.displayReference || false}
176
+
disabled={!data.enabled}
177
+
/>
180
178
181
-
<Switch
182
-
name="Delete message from starboard upon losing reactions"
183
-
description="If a message in the starboard looses the required reactions, it gets deleted."
184
-
url={url}
185
-
dataName="delete"
186
-
defaultState={data.delete || false}
187
-
disabled={!data.enabled}
188
-
/>
179
+
<Switch
180
+
name="Delete message from starboard upon losing reactions"
181
+
description="If a message in the starboard looses the required reactions, it gets deleted."
182
+
url={url}
183
+
dataName="delete"
184
+
defaultState={data.delete || false}
185
+
disabled={!data.enabled}
186
+
/>
189
187
190
-
<NumberInput
191
-
name="Number of reactions required"
192
-
description="Sets the number of reactions needed to get a message onto the data."
193
-
url={url}
194
-
dataName="requiredEmojis"
195
-
defaultState={data.requiredEmojis ?? 0}
196
-
disabled={!data.enabled}
197
-
min={1}
198
-
/>
188
+
<NumberInput
189
+
name="Number of reactions required"
190
+
description="Sets the number of reactions needed to get a message onto the data."
191
+
url={url}
192
+
dataName="requiredEmojis"
193
+
defaultState={data.requiredEmojis ?? 0}
194
+
disabled={!data.enabled}
195
+
min={1}
196
+
/>
199
197
200
-
<SelectMenu
201
-
name="Channel"
202
-
url={url}
203
-
dataName="channelId"
204
-
items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => { return { name: `#${c.name}`, value: c.id, error: c.missingPermissions.join(", ") }; })}
205
-
description="Select the channel where the starboard messages should be send into."
206
-
defaultState={data.channelId}
207
-
disabled={!data.enabled}
208
-
/>
198
+
<SelectMenu
199
+
name="Channel"
200
+
url={url}
201
+
dataName="channelId"
202
+
items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => ({ name: `#${c.name}`, value: c.id, error: c.missingPermissions.join(", ") }))}
203
+
description="Select the channel where the starboard messages should be send into."
204
+
defaultState={data.channelId}
205
+
disabled={!data.enabled}
206
+
/>
209
207
210
-
<div className="lg:flex gap-3">
211
-
<div className="lg:w-1/2">
212
-
<SelectMenu
213
-
name="Emoji"
214
-
url={url}
215
-
dataName="emoji"
216
-
items={[
217
-
{ icon: "⭐", name: "Star", value: "⭐" },
218
-
{ icon: "✨", name: "Sparkles", value: "✨" },
219
-
...guild?.emojis?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => {
220
-
return { icon: <Image src={`https://cdn.discordapp.com/emojis/${c.id}.webp?size=64&quality=lossless`} className="rounded-md h-6 w-6" alt={c.name} height={64} width={64} />, name: c.name.replace(/-|_/g, " "), value: c.id };
221
-
}) || []
222
-
]}
223
-
description="Select the emoji that needs to be reacted with."
224
-
defaultState={data.emoji}
225
-
onSave={(options) => {
226
-
setExample({
227
-
...example,
228
-
emoji: options.value as string
229
-
});
230
-
}}
231
-
disabled={!data.enabled}
232
-
/>
233
-
</div>
208
+
<div className="lg:flex gap-3">
209
+
<div className="lg:w-1/2">
210
+
<SelectMenu
211
+
name="Emoji"
212
+
url={url}
213
+
dataName="emoji"
214
+
items={[
215
+
{ icon: "⭐", name: "Star", value: "⭐" },
216
+
{ icon: "✨", name: "Sparkles", value: "✨" },
217
+
...guild?.emojis?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => ({
218
+
icon: (
219
+
<Image
220
+
src={`https://cdn.discordapp.com/emojis/${c.id}.webp?size=64&quality=lossless`}
221
+
className="rounded-md h-6 w-6"
222
+
alt={c.name}
223
+
height={64}
224
+
width={64}
225
+
/>
226
+
),
227
+
name: c.name.replace(/-|_/g, " "),
228
+
value: c.id
229
+
})) || []
230
+
]}
231
+
description="Select the emoji that needs to be reacted with."
232
+
defaultState={data.emoji}
233
+
onSave={(options) => {
234
+
setData({
235
+
...data,
236
+
emoji: options.value as string
237
+
});
238
+
}}
239
+
disabled={!data.enabled}
240
+
/>
241
+
</div>
234
242
235
-
<div className="lg:w-1/2">
236
-
<SelectMenu
237
-
name="Profile display style"
238
-
url={url}
239
-
dataName="style"
240
-
items={[
241
-
{
242
-
name: "Username",
243
-
value: 0
244
-
},
245
-
{
246
-
name: "Global Nickname",
247
-
value: 1
248
-
},
249
-
{
250
-
name: "Nickname",
251
-
value: 2
252
-
},
253
-
{
254
-
name: "Nickname & Per-guild Avatar",
255
-
value: 3
256
-
}
257
-
]}
258
-
description="The style members profile gets displayed."
259
-
defaultState={data.style}
260
-
onSave={(options) => handleUserStyle(options.value as number)}
261
-
disabled={!data.enabled}
262
-
/>
263
-
</div>
243
+
<div className="lg:w-1/2">
244
+
<SelectMenu
245
+
name="Profile display style"
246
+
url={url}
247
+
dataName="style"
248
+
items={[
249
+
{
250
+
name: "Username",
251
+
value: 0
252
+
},
253
+
{
254
+
name: "Global Nickname",
255
+
value: 1
256
+
},
257
+
{
258
+
name: "Nickname",
259
+
value: 2
260
+
},
261
+
{
262
+
name: "Nickname & Per-guild Avatar",
263
+
value: 3
264
+
}
265
+
]}
266
+
description="The style members profile gets displayed."
267
+
defaultState={data.style}
268
+
onSave={(options) => handleUserStyle(options.value as number)}
269
+
disabled={!data.enabled}
270
+
/>
264
271
</div>
272
+
</div>
265
273
266
-
<div className="lg:flex gap-3">
267
-
<div className="lg:w-1/2">
268
-
<MultiSelectMenu
269
-
name="Blacklisted roles"
270
-
url={url}
271
-
dataName="blacklistRoleIds"
272
-
items={guild?.roles?.sort((a, b) => b.position - a.position).map((r) => ({ name: `@${r.name}`, value: r.id, color: r.color }))}
273
-
description="Select roles which should not be able to data."
274
-
defaultState={data.blacklistRoleIds || []}
275
-
max={500}
276
-
disabled={!data.enabled}
277
-
/>
278
-
</div>
274
+
<div className="lg:flex gap-3">
275
+
<div className="lg:w-1/2">
276
+
<MultiSelectMenu
277
+
name="Blacklisted roles"
278
+
url={url}
279
+
dataName="blacklistRoleIds"
280
+
items={guild?.roles?.sort((a, b) => b.position - a.position).map((r) => ({ name: `@${r.name}`, value: r.id, color: r.color }))}
281
+
description="Select roles which should not be able to data."
282
+
defaultState={data.blacklistRoleIds || []}
283
+
max={500}
284
+
disabled={!data.enabled}
285
+
/>
286
+
</div>
279
287
280
-
<div className="lg:w-1/2">
281
-
<MultiSelectMenu
282
-
name="Blacklisted channels"
283
-
url={url}
284
-
dataName="blacklistChannelIds"
285
-
items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => { return { name: `#${c.name}`, value: c.id }; })}
286
-
description="Select channels which should not be able to be in the data."
287
-
defaultState={data.blacklistChannelIds || []}
288
-
max={500}
289
-
disabled={!data.enabled}
290
-
/>
291
-
</div>
288
+
<div className="lg:w-1/2">
289
+
<MultiSelectMenu
290
+
name="Blacklisted channels"
291
+
url={url}
292
+
dataName="blacklistChannelIds"
293
+
items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => ({ name: `#${c.name}`, value: c.id }))}
294
+
description="Select channels which should not be able to be in the data."
295
+
defaultState={data.blacklistChannelIds || []}
296
+
max={500}
297
+
disabled={!data.enabled}
298
+
/>
292
299
</div>
300
+
</div>
293
301
294
-
<div className="py-3 px-4 rounded-md mt-4" style={{ backgroundColor: "rgb(49, 51, 56)" }}>
295
-
<DiscordMessage
302
+
<div className="py-3 px-4 rounded-md mt-4" style={{ backgroundColor: "rgb(49, 51, 56)" }}>
303
+
<DiscordMessage
304
+
mode={"DARK"}
305
+
user={{
306
+
username: "Wamellow",
307
+
avatar: "/waya-v3-small.webp",
308
+
bot: true
309
+
}}
310
+
>
311
+
<Highlight
296
312
mode={"DARK"}
297
-
user={{
298
-
username: "Wamellow",
299
-
avatar: "/waya-v3-small.webp",
300
-
bot: true
313
+
text={""}
314
+
/>
315
+
316
+
<DiscordMessageEmbed
317
+
className="max-w-lg"
318
+
author={{
319
+
icon_url: example.avatar,
320
+
text: example.username
301
321
}}
322
+
mode={"DARK"}
323
+
color={data.embedColor}
302
324
>
303
-
<Highlight
304
-
mode={"DARK"}
305
-
text={""}
306
-
/>
325
+
<div>
326
+
Hello 112 here, please speak your message right after this ad. 112 is sponsored by... raid shadow legends!
327
+
</div>
307
328
308
-
<DiscordMessageEmbed
309
-
author={{
310
-
icon_url: example.avatar,
311
-
text: example.username
312
-
}}
313
-
mode={"DARK"}
314
-
color={data.embedColor}
315
-
>
316
-
<div> I can imagine it now, a lunch break at Discord headquarters and a bunch of T&S staff talking to each other</div>
317
-
<div><strong>Staff 1:</strong> Hey did you get another ticket from that 2Lost4Discоrd guy?</div>
318
-
<div><strong>Staff 2:</strong> Yeah that guy really likes talking to us at this point, how about you did you get any of that Lunish one?</div>
319
-
<div><strong>Staff 1:</strong> Yeah I honestly gotten used to it at this point, we might need to issue a more detailed guide on using support when absolutely needed cause its getting ridiculous with those two.</div>
320
-
<div><strong>Staff 2:</strong> Tell me about it its like a routine on the shift.</div>
329
+
<br />
330
+
331
+
<div className="flex items-center gap-1">
332
+
<span className="font-bold flex items-center"><Emoji emoji={data.emoji} /> 9</span> | <span className="text-blue-500 hover:underline cursor-pointer">#・lounge</span>
333
+
</div>
334
+
335
+
</DiscordMessageEmbed>
321
336
322
-
<br />
337
+
</DiscordMessage>
338
+
</div>
323
339
324
-
<span className="font-bold">{example.emoji} 9</span> | <span className="text-blue-500 hover:underline cursor-pointer">#・lounge</span>
325
-
</DiscordMessageEmbed>
340
+
</>);
341
+
}
326
342
327
-
</DiscordMessage>
328
-
</div>
343
+
function Emoji({ emoji }: { emoji: string }) {
344
+
if (!/\d{15,20}/.test(emoji)) {
345
+
return emoji;
346
+
}
329
347
330
-
</ >
348
+
return (
349
+
<Image
350
+
alt=""
351
+
className="rounded size-[18px] mr-1"
352
+
src={`https://cdn.discordapp.com/emojis/${emoji}.webp?size=64`}
353
+
height={32}
354
+
width={32}
355
+
/>
331
356
);
332
357
}