The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add dashboard sections
+51
-36
+1
-1
app/dashboard/[guildId]/layout.tsx
+1
-1
app/dashboard/[guildId]/layout.tsx
···
16
16
import { ServerButton } from "@/components/server-button";
17
17
import SadWumpusPic from "@/public/sad-wumpus.gif";
18
18
import { ApiV1GuildsChannelsGetResponse, ApiV1GuildsEmojisGetResponse, ApiV1GuildsGetResponse, ApiV1GuildsRolesGetResponse, RouteErrorResponse } from "@/typings";
19
+
import { intl } from "@/utils/numbers";
19
20
import { getCanonicalUrl } from "@/utils/urls";
20
21
21
22
export default function RootLayout({
···
34
35
const [error, setError] = useState<string>();
35
36
36
37
const path = usePathname();
37
-
const intl = new Intl.NumberFormat("en", { notation: "standard" });
38
38
39
39
useEffect(() => {
40
40
+13
-10
app/dashboard/[guildId]/leaderboards/page.tsx
+13
-10
app/dashboard/[guildId]/leaderboards/page.tsx
···
6
6
import { useQuery } from "react-query";
7
7
8
8
import { Guild, guildStore } from "@/common/guilds";
9
-
import Betweener from "@/components/Betweener";
10
9
import ImageUrlInput from "@/components/inputs/ImageUrlInput";
11
10
import MultiSelectMenu from "@/components/inputs/MultiSelectMenu";
12
11
import TextInput from "@/components/inputs/TextInput";
13
12
import { ScreenMessage } from "@/components/screen-message";
13
+
import Section from "@/components/section";
14
14
import { cacheOptions, getData } from "@/lib/api";
15
15
import SadWumpusPic from "@/public/sad-wumpus.gif";
16
16
import { ApiV1GuildsModulesLeaderboardGetResponse } from "@/typings";
17
17
18
18
import OverviewLinkComponent from "../../../../components/OverviewLinkComponent";
19
+
import ResetLeaderboard from "./reset.component";
19
20
import UpdatingLeaderboardCard from "./updating.component";
20
21
21
22
export default function Home() {
···
120
121
defaultState={data.banner || ""}
121
122
/>
122
123
123
-
<hr className="mt-6 mb-2 dark:border-wamellow-light border-wamellow-100-light" />
124
-
<span className="dark:text-neutral-500 text-neutral-400 text-sm">Select top 1. role first, then 2. and last 3. (left 1st, right 3rd)</span>
124
+
<Section
125
+
title="Roles"
126
+
>
127
+
Select roles which should be assigned to the top members. (left to right - 1st to 3rd place)
128
+
</Section>
125
129
126
130
<div className="lg:flex gap-3 mt-5">
127
131
<div className="lg:w-1/2">
···
148
152
</div>
149
153
</div>
150
154
151
-
<hr className="my-6 dark:border-wamellow-light border-wamellow-100-light" />
152
-
153
155
<div className="lg:w-1/2">
154
156
<MultiSelectMenu
155
157
name="Blacklisted channels"
···
162
164
/>
163
165
</div>
164
166
165
-
<hr className="mt-6 mb-2 dark:border-wamellow-light border-wamellow-100-light" />
166
-
<span className="dark:text-neutral-500 text-neutral-400 text-sm">Leaderboards update roughtly all 20 minutes</span>
167
+
<Section
168
+
title="Updating leaderboards"
169
+
>
170
+
These leaderboards will be sent in a channel and update roughly every 20 minutes.
171
+
</Section>
167
172
168
-
<div className="w-full grid gap-4 md:flex md:gap-0 md:items-center mt-5">
173
+
<div className="w-full grid gap-4 md:flex md:gap-0 md:items-center my-10">
169
174
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "messages")} type="messages" />
170
-
<Betweener />
171
175
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "voiceminutes")} type="voiceminutes" />
172
-
<Betweener />
173
176
<UpdatingLeaderboardCard guild={guild as Guild} lb={data.updating.find((lb) => lb.type === "invites")} type="invites" />
174
177
</div>
175
178
+15
-24
app/dashboard/[guildId]/page.tsx
+15
-24
app/dashboard/[guildId]/page.tsx
···
1
1
"use client";
2
2
3
-
import { Accordion, AccordionItem, Chip } from "@nextui-org/react";
3
+
import { Accordion, AccordionItem } from "@nextui-org/react";
4
4
import Image from "next/image";
5
5
import Link from "next/link";
6
6
import { useParams } from "next/navigation";
···
12
12
import SelectMenu from "@/components/inputs/SelectMenu";
13
13
import Switch from "@/components/inputs/Switch";
14
14
import Modal from "@/components/modal";
15
+
import Section from "@/components/section";
15
16
16
17
import OverviewLinkComponent from "../../../components/OverviewLinkComponent";
17
18
···
34
35
icon={<HiChartBar />}
35
36
/>
36
37
37
-
<div className="flex items-center">
38
-
39
-
<div>
40
-
<div className="text-sm mb-0.5">Posting updates {guild?.follownewsChannel?.name && "into"}</div>
41
-
{guild?.follownewsChannel?.name && <div className="text-2xl dark:text-neutral-100 text-neutral-900 font-medium">#{guild?.follownewsChannel?.name}</div>}
42
-
<button onClick={() => setModal(true)} className="flex dark:text-violet-400/60 dark:hover:text-violet-400/90 text-violet-600/60 hover:text-violet-600/90 duration-200">
43
-
<HiMail className="relative top-1" />
44
-
<span className="ml-2">{guild?.follownewsChannel?.name ? "Change" : "Set"} channel</span>
45
-
</button>
46
-
</div>
47
-
38
+
<div>
39
+
<div className="text-sm mb-0.5">Posting updates {guild?.follownewsChannel?.name && "into"}</div>
40
+
{guild?.follownewsChannel?.name && <div className="text-2xl dark:text-neutral-100 text-neutral-900 font-medium">#{guild?.follownewsChannel?.name}</div>}
41
+
<button onClick={() => setModal(true)} className="flex dark:text-violet-400/60 dark:hover:text-violet-400/90 text-violet-600/60 hover:text-violet-600/90 duration-200">
42
+
<HiMail className="relative top-1" />
43
+
<span className="ml-2">{guild?.follownewsChannel?.name ? "Change" : "Set"} channel</span>
44
+
</button>
48
45
</div>
49
46
50
47
<Modal
···
88
85
/>
89
86
</Modal>
90
87
91
-
<hr className="mt-6 mb-2 dark:border-wamellow-light border-wamellow-100-light" />
92
-
<span className="dark:text-neutral-500 text-neutral-400 text-sm flex">
93
-
This option will assign a channel to be the text input method for in-voicechat text to speech.
94
-
<Chip
95
-
className="ml-auto"
96
-
color="secondary"
97
-
variant="flat"
98
-
>
99
-
Beta
100
-
</Chip>
101
-
</span>
88
+
<Section
89
+
title="Text to Speech"
90
+
>
91
+
Let users to send messages to a channel and have the bot read it out loud in voice chat.
92
+
</Section>
102
93
103
94
<div className="lg:flex gap-6 mt-5">
104
95
{guild?.tts && guild?.channels?.length &&
105
96
<div className="lg:w-1/2 space-y-8">
106
97
<SelectMenu
107
-
name="Text to Speech channel"
98
+
name="Chat to Speech channel"
108
99
url={`/guilds/${params.guildId}`}
109
100
dataName="channelId"
110
101
items={guild?.channels?.sort((a, b) => a.name.localeCompare(b.name)).map((c) => ({ name: `#${c.name}`, value: c.id }))}
+1
-1
app/leaderboard/[guildId]/page.tsx
+1
-1
app/leaderboard/[guildId]/page.tsx
···
121
121
size={128}
122
122
/>
123
123
124
-
<div className="w-full max-w-[calc(100%-14rem)]">
124
+
<div className="w-full max-w-[calc(100%-16rem)]">
125
125
<div className="flex items-center gap-2">
126
126
<span className="text-xl font-medium dark:text-neutral-200 text-neutral-800 truncate">
127
127
{member.globalName || member.username || "Unknown user"}
+21
components/section.tsx
+21
components/section.tsx
···
1
+
import { Divider } from "@nextui-org/react";
2
+
3
+
export default function Section({
4
+
title,
5
+
children,
6
+
...props
7
+
}: {
8
+
title: string;
9
+
children: React.ReactNode;
10
+
} & React.HTMLAttributes<HTMLDivElement>) {
11
+
return (
12
+
<>
13
+
<Divider className="mt-10 mb-4" />
14
+
15
+
<div {...props}>
16
+
<h3 className="text-xl text-neutral-200">{title}</h3>
17
+
<p className="dark:text-neutral-500 text-neutral-400 mb-3">{children}</p>
18
+
</div>
19
+
</>
20
+
);
21
+
}