The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
create Icon component for leaderboards
+43
-21
+25
app/leaderboard/[guildId]/icon.tsx
+25
app/leaderboard/[guildId]/icon.tsx
···
1
+
import { SVGProps } from "react";
2
+
3
+
import InvitesIcon from "@/components/icons/invites";
4
+
import MessagesIcon from "@/components/icons/messages";
5
+
import VoiceIcon from "@/components/icons/voice";
6
+
import cn from "@/utils/cn";
7
+
8
+
type Props = SVGProps<SVGSVGElement> & {
9
+
type: "messages" | "voiceminutes" | "invites"
10
+
}
11
+
12
+
export default function Icon({
13
+
type,
14
+
className,
15
+
...props
16
+
}: Props) {
17
+
switch (type) {
18
+
case "messages":
19
+
return <MessagesIcon height={cn("0.9em", className)} {...props} />;
20
+
case "voiceminutes":
21
+
return <VoiceIcon height="0.9em" className={cn("mt-1 ml-1", className)} {...props} />;
22
+
case "invites":
23
+
return <InvitesIcon height="0.9em" className={cn("mt-1.5", className)} {...props} />;
24
+
}
25
+
}
+3
-4
app/leaderboard/[guildId]/layout.tsx
+3
-4
app/leaderboard/[guildId]/layout.tsx
···
13
13
import Side from "./side.component";
14
14
15
15
export interface LeaderboardProps {
16
-
params: { guildId: string },
16
+
params: { guildId: string };
17
17
children: React.ReactNode;
18
18
}
19
19
···
29
29
const url = getCanonicalUrl("leaderboard", params.guildId);
30
30
31
31
const date = new Date();
32
-
const cacheQuery = `${date.getDate()}${date.getHours()}`
32
+
const cacheQuery = `${date.getDate()}${date.getHours()}`;
33
33
34
34
return {
35
35
title,
···
61
61
export default async function RootLayout({
62
62
params,
63
63
children
64
-
}: LeaderboardProps
65
-
) {
64
+
}: LeaderboardProps) {
66
65
67
66
const guildPromise = getGuild(params.guildId);
68
67
const designPromise = getDesign(params.guildId);
+5
-2
app/leaderboard/[guildId]/open-graph.png/route.tsx
+5
-2
app/leaderboard/[guildId]/open-graph.png/route.tsx
···
7
7
import { truncate } from "@/utils/truncate";
8
8
9
9
import { getGuild, getTopMembers } from "../api";
10
+
import Icon from "../icon";
10
11
import { LeaderboardProps } from "../layout";
11
-
import MessagesIcon from "@/components/icons/messages";
12
12
13
13
export const revalidate = 3600; // 1 hour
14
14
···
16
16
request: NextRequest,
17
17
{ params }: LeaderboardProps
18
18
) {
19
+
let type = request.nextUrl.searchParams.get("type");
20
+
if (type !== "messages" && type !== "voiceminutes" && type !== "invites") type = "messages";
21
+
19
22
const guild = await getGuild(params.guildId);
20
23
const members = await getTopMembers(params.guildId, { page: 1, type: "messages" });
21
24
···
52
55
53
56
<div tw="text-3xl text-gray-400 flex text-3xl" style={{ fontWeight: 500 }}>
54
57
<span tw="mr-2">{intl.format(member.activity.messages)}</span>
55
-
<MessagesIcon height="0.9em" />
58
+
<Icon type={type as "messages"} />
56
59
</div>
57
60
</div>
58
61
))}
+2
-7
app/leaderboard/[guildId]/page.tsx
+2
-7
app/leaderboard/[guildId]/page.tsx
···
3
3
import Image from "next/image";
4
4
import { HiBadgeCheck } from "react-icons/hi";
5
5
6
-
import InvitesIcon from "@/components/icons/invites";
7
-
import MessagesIcon from "@/components/icons/messages";
8
-
import VoiceIcon from "@/components/icons/voice";
9
6
import ImageReduceMotion from "@/components/image-reduce-motion";
10
7
import { AddButton, HomeButton, ScreenMessage, SupportButton } from "@/components/screen-message";
11
8
import SadWumpusPic from "@/public/sad-wumpus.gif";
12
9
13
10
import { getDesign, getGuild, getPagination, getTopMembers } from "./api";
11
+
import Icon from "./icon";
14
12
import Pagination from "./pagination.component";
15
13
16
14
interface LeaderboardProps {
···
127
125
{searchParams.type === "voiceminutes" ? member.activity?.formattedVoicetime : intl.format(member.activity?.[searchParams.type || "messages"])}
128
126
</span>
129
127
130
-
{(searchParams.type === "messages" || !searchParams.type) && <MessagesIcon height="0.9em" />}
131
-
{searchParams.type === "voiceminutes" && <VoiceIcon height="0.9em" className="mt-1 ml-1" />}
132
-
{searchParams.type === "invites" && <InvitesIcon height="0.9em" className="mt-1.5" />}
133
-
128
+
<Icon type={searchParams.type} />
134
129
</div>
135
130
136
131
<form action={publish}>
+2
-2
components/icons/invites.tsx
+2
-2
components/icons/invites.tsx
···
12
12
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
13
13
/>
14
14
</svg>
15
-
)
16
-
};
15
+
);
16
+
}
+2
-2
components/icons/messages.tsx
+2
-2
components/icons/messages.tsx
···
12
12
d="M448 296c0 66.3-53.7 120-120 120h-8c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H320c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72zm-256 0c0 66.3-53.7 120-120 120H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H64c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72z"
13
13
/>
14
14
</svg>
15
-
)
16
-
};
15
+
);
16
+
}
+2
-2
components/icons/topgg.tsx
+2
-2
components/icons/topgg.tsx
+2
-2
components/icons/voice.tsx
+2
-2
components/icons/voice.tsx
···
12
12
d="M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM412.6 181.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5z"
13
13
/>
14
14
</svg>
15
-
)
16
-
};
15
+
);
16
+
}