The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
move leaderboards svgs to components
+77
-32
+11
-15
app/leaderboard/[guildId]/page.tsx
+11
-15
app/leaderboard/[guildId]/page.tsx
···
10
10
11
11
import { getDesign, getGuild, getPagination, getTopMembers } from "./api";
12
12
import Pagination from "./pagination.component";
13
+
import MessagesIcon from "@/components/icons/messages";
14
+
import VoiceIcon from "@/components/icons/voice";
15
+
import InvitesIcon from "@/components/icons/invites";
13
16
14
17
interface LeaderboardProps {
15
-
params: { guildId: string },
16
-
searchParams: { page: string, type: "messages" | "voiceminutes" | "invites" },
18
+
params: { guildId: string };
19
+
searchParams: { page: string, type: "messages" | "voiceminutes" | "invites" };
17
20
}
18
21
19
22
export const revalidate = 60 * 60;
···
118
121
</div>
119
122
120
123
<div className="ml-auto flex text-xl font-medium dark:text-neutral-200 text-neutral-800">
121
-
<span>{searchParams.type === "voiceminutes" ? member.activity?.formattedVoicetime : intl.format(member.activity?.[searchParams.type || "messages"])}</span>
124
+
<span className="mr-1">
125
+
{searchParams.type === "voiceminutes" ? member.activity?.formattedVoicetime : intl.format(member.activity?.[searchParams.type || "messages"])}
126
+
</span>
122
127
123
-
<svg
124
-
xmlns="http://www.w3.org/2000/svg"
125
-
height="0.9em"
126
-
viewBox={searchParams.type === "invites" ? "0 0 640 512" : "0 0 448 512"}
127
-
className={cn("ml-1 relative", searchParams.type === "voiceminutes" && "ml-2")}
128
-
style={{ top: searchParams.type === "messages" ? 0 : 4 }}
129
-
fill="#d4d4d4"
130
-
>
131
-
{(searchParams.type === "messages" || !searchParams.type) && <path 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" />}
132
-
{searchParams.type === "voiceminutes" && <path 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" />}
133
-
{searchParams.type === "invites" && <path 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" />}
134
-
</svg>
128
+
{(searchParams.type === "messages" || !searchParams.type) && <MessagesIcon height="0.9em" />}
129
+
{searchParams.type === "voiceminutes" && <VoiceIcon height="0.9em" className="mt-1 ml-1" />}
130
+
{searchParams.type === "invites" && <InvitesIcon height="0.9em" className="mt-1.5" />}
135
131
136
132
</div>
137
133
+16
components/icons/invites.tsx
+16
components/icons/invites.tsx
···
1
+
import { SVGProps } from "react";
2
+
3
+
export default function InvitesIcon(props: SVGProps<SVGSVGElement>) {
4
+
return (
5
+
<svg
6
+
viewBox="0 0 640 512"
7
+
focusable="false"
8
+
{...props}
9
+
>
10
+
<path
11
+
fill="currentColor"
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
+
/>
14
+
</svg>
15
+
)
16
+
};
+16
components/icons/messages.tsx
+16
components/icons/messages.tsx
···
1
+
import { SVGProps } from "react";
2
+
3
+
export default function MessagesIcon(props: SVGProps<SVGSVGElement>) {
4
+
return (
5
+
<svg
6
+
viewBox="0 0 448 512"
7
+
focusable="false"
8
+
{...props}
9
+
>
10
+
<path
11
+
fill="currentColor"
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
+
/>
14
+
</svg>
15
+
)
16
+
};
+18
-17
components/icons/topgg.tsx
+18
-17
components/icons/topgg.tsx
···
1
1
import { SVGProps } from "react";
2
2
3
-
const TopggIcon = (props: SVGProps<SVGSVGElement>) => (
4
-
<svg
5
-
viewBox="120 120 580 580"
6
-
focusable="false"
7
-
{...props}
8
-
>
9
-
<path
10
-
fill="currentColor"
11
-
d="M655.711 247H330.71V572H397.113C422.599 572 447.042 561.876 465.064 543.854C483.086 525.832 493.21 501.389 493.21 475.902V409.5H559.613C585.099 409.5 609.542 399.375 627.564 381.354C645.586 363.332 655.711 338.889 655.711 313.402V247Z"
12
-
/>
13
-
<path
14
-
fill="currentColor"
15
-
d="M144 247H306.5V409.5H193.657C180.531 409.5 167.943 404.286 158.661 395.004C149.379 385.722 144.165 373.134 144.165 360.008L144 247Z"
16
-
/>
17
-
</svg>
18
-
);
19
-
export default TopggIcon;
3
+
export default function TopggIcon(props: SVGProps<SVGSVGElement>) {
4
+
return (
5
+
<svg
6
+
viewBox="120 120 580 580"
7
+
focusable="false"
8
+
{...props}
9
+
>
10
+
<path
11
+
fill="currentColor"
12
+
d="M655.711 247H330.71V572H397.113C422.599 572 447.042 561.876 465.064 543.854C483.086 525.832 493.21 501.389 493.21 475.902V409.5H559.613C585.099 409.5 609.542 399.375 627.564 381.354C645.586 363.332 655.711 338.889 655.711 313.402V247Z"
13
+
/>
14
+
<path
15
+
fill="currentColor"
16
+
d="M144 247H306.5V409.5H193.657C180.531 409.5 167.943 404.286 158.661 395.004C149.379 385.722 144.165 373.134 144.165 360.008L144 247Z"
17
+
/>
18
+
</svg>
19
+
)
20
+
};
+16
components/icons/voice.tsx
+16
components/icons/voice.tsx
···
1
+
import { SVGProps } from "react";
2
+
3
+
export default function VoiceIcon(props: SVGProps<SVGSVGElement>) {
4
+
return (
5
+
<svg
6
+
viewBox="0 0 448 512"
7
+
focusable="false"
8
+
{...props}
9
+
>
10
+
<path
11
+
fill="currentColor"
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
+
/>
14
+
</svg>
15
+
)
16
+
};