The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
make top-guilds clickable
+70
-6
+10
-1
app/(home)/bot/pronouns/layout.tsx
+10
-1
app/(home)/bot/pronouns/layout.tsx
···
66
66
</h1>
67
67
</div>
68
68
69
-
{topGuilds && <ImageGrid images={topGuilds.map((guild) => ({ id: guild.name, url: guild.icon || "/discord.webp" }))} />}
69
+
{topGuilds &&
70
+
<ImageGrid images={topGuilds
71
+
.sort((a, b) => b.memberCount - a.memberCount)
72
+
.map((guild) => ({
73
+
id: guild.id,
74
+
url: guild.icon || "/discord.webp",
75
+
link: getCanonicalUrl("leaderboard", guild.id)
76
+
}))}
77
+
/>
78
+
}
70
79
71
80
<div className="md:text-xl text-lg lg:flex w-full mt-4">
72
81
<div className="font-medium w-full grid grid-cols-2 md:flex flex-wrap h-min gap-2">
+11
-1
app/(home)/page.tsx
+11
-1
app/(home)/page.tsx
···
26
26
import { ApiV1StatisticsGetResponse, ApiV1TopguildsGetResponse } from "@/typings";
27
27
import cn from "@/utils/cn";
28
28
import { convertMonthToName } from "@/utils/time";
29
+
import { getCanonicalUrl } from "@/utils/urls";
29
30
30
31
const montserrat = Montserrat({ subsets: ["latin"] });
31
32
const handwritten = Patrick_Hand({ subsets: ["latin"], weight: "400" });
···
100
101
</div>
101
102
</div>
102
103
103
-
{topGuilds && <ImageGrid images={topGuilds.map((guild) => ({ id: guild.name, url: guild.icon || "/discord.webp" }))} />}
104
+
{topGuilds &&
105
+
<ImageGrid images={topGuilds
106
+
.sort((a, b) => b.memberCount - a.memberCount)
107
+
.map((guild) => ({
108
+
id: guild.id,
109
+
url: guild.icon || "/discord.webp",
110
+
link: getCanonicalUrl("leaderboard", guild.id)
111
+
}))}
112
+
/>
113
+
}
104
114
105
115
<div className="md:text-xl text-lg lg:flex w-full mt-4">
106
116
<span className="font-medium">
+10
-1
app/(home)/pro/page.tsx
+10
-1
app/(home)/pro/page.tsx
···
87
87
<Badge text="Not available" />
88
88
</div>
89
89
90
-
{topGuilds && <ImageGrid images={topGuilds.map((guild) => ({ id: guild.name, url: guild.icon || "/discord.webp" }))} />}
90
+
{topGuilds &&
91
+
<ImageGrid images={topGuilds
92
+
.sort((a, b) => b.memberCount - a.memberCount)
93
+
.map((guild) => ({
94
+
id: guild.id,
95
+
url: guild.icon || "/discord.webp",
96
+
link: getCanonicalUrl("leaderboard", guild.id)
97
+
}))}
98
+
/>
99
+
}
91
100
92
101
<div className="dark:bg-wamellow bg-wamellow-100 dark:text-neutral-300 text-neutral-700 mt-10 w-full p-4 rounded-xl text-xl">
93
102
+38
-3
components/image-grid.tsx
+38
-3
components/image-grid.tsx
···
1
-
2
1
import Image from "next/image";
2
+
import Link from "next/link";
3
3
4
4
import ImageReduceMotion from "./image-reduce-motion";
5
5
···
7
7
images: {
8
8
id: string;
9
9
url: string;
10
+
link?: string;
10
11
}[]
11
12
}
12
13
···
15
16
<div className="w-full h-52 overflow-hidden rounded-xl">
16
17
<div className="grid grid-flow-col grid-rows-3 w-full md:gap-4 gap-3 rotate-6 relative right-8 bottom-10 md:bottom-20">
17
18
{images.map((image, i) => (
18
-
<div key={"imageGrid-" + image.id + i} className="relative md:h-32 h-24 md:w-32 w-24 hover:scale-110 duration-200">
19
+
<Container
20
+
key={"imageGrid-" + image.id + i}
21
+
className="relative md:h-32 h-24 md:w-32 w-24 hover:scale-110 duration-200"
22
+
href={image.link}
23
+
>
19
24
{image.url.includes("discordapp.net")
20
25
?
21
26
<ImageReduceMotion
···
35
40
width={128}
36
41
/>
37
42
}
38
-
</div>
43
+
</Container>
39
44
))}
40
45
41
46
</div>
42
47
</div>
43
48
);
49
+
}
50
+
51
+
function Container({
52
+
children,
53
+
className,
54
+
href
55
+
}: {
56
+
children: React.ReactNode;
57
+
className: string;
58
+
href?: string;
59
+
}) {
60
+
61
+
if (!href) {
62
+
return (
63
+
<div className={className}>
64
+
{children}
65
+
</div>
66
+
);
67
+
68
+
}
69
+
70
+
return (
71
+
<Link
72
+
className={className}
73
+
href={href}
74
+
>
75
+
{children}
76
+
</Link>
77
+
);
78
+
44
79
}