The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
create team page
+191
+182
app/(home)/team/page.tsx
+182
app/(home)/team/page.tsx
···
1
+
import Image from "next/image";
2
+
import Link from "next/link";
3
+
import { HiExternalLink } from "react-icons/hi";
4
+
5
+
import { getUser } from "@/lib/discord/user";
6
+
import { filterDuplicates } from "@/lib/filter-duplicates";
7
+
import cn from "@/utils/cn";
8
+
9
+
enum TeamType {
10
+
Developer = "developer",
11
+
AdditionalProgramming = "additional-programming",
12
+
Blahaj = "blahaj",
13
+
Donator = "donator"
14
+
}
15
+
16
+
const data = [
17
+
{
18
+
id: "821472922140803112",
19
+
team: TeamType.Developer,
20
+
social: "https://lunish.nl/kofi"
21
+
},
22
+
23
+
{
24
+
name: "Lea",
25
+
avatarUrl: "/lea.webp",
26
+
team: TeamType.Blahaj
27
+
},
28
+
{
29
+
name: "Lucy",
30
+
avatarUrl: "/lucy.webp",
31
+
team: TeamType.Blahaj
32
+
},
33
+
{
34
+
name: "Lauren",
35
+
avatarUrl: "/lauren.webp",
36
+
team: TeamType.Blahaj
37
+
},
38
+
39
+
{
40
+
id: "845287163712372756",
41
+
team: TeamType.AdditionalProgramming,
42
+
social: "https://ko-fi.com/aurora_loves_women"
43
+
},
44
+
{
45
+
id: "903534295652663326",
46
+
team: TeamType.AdditionalProgramming,
47
+
social: "https://ismcserver.online"
48
+
},
49
+
50
+
{
51
+
id: "301482272497074189",
52
+
team: TeamType.Donator
53
+
},
54
+
{
55
+
id: "797012765352001557",
56
+
team: TeamType.Donator,
57
+
social: "https://crni.xyz/"
58
+
},
59
+
{
60
+
id: "1044032607207301160",
61
+
team: TeamType.Donator,
62
+
social: "https://notifyme.bot/"
63
+
},
64
+
{
65
+
id: "742224557632389160",
66
+
team: TeamType.Donator
67
+
},
68
+
{
69
+
id: "340243638892101646",
70
+
team: TeamType.Donator,
71
+
social: "https://sattler.dev/"
72
+
},
73
+
{
74
+
id: "911823996767600730",
75
+
team: TeamType.Donator,
76
+
social: "https://ibcheechy.com/"
77
+
}
78
+
] as const;
79
+
80
+
export default function Home() {
81
+
return (
82
+
<div>
83
+
<h2 className="text-2xl font-medium text-neutral-200">Team 🍪</h2>
84
+
85
+
<div className="divide-y-1 divide-wamellow">
86
+
{filterDuplicates(data.map((person) => person.team)).map((team) => (
87
+
<div
88
+
key={team}
89
+
className="py-5"
90
+
>
91
+
<h3 className="text-lg font-medium text-neutral-200">
92
+
{team.split("-").map((str) => str.replace(/^\w/, (char) => char.toUpperCase())).join(" ")}
93
+
</h3>
94
+
95
+
<div className="mt-2 flex flex-wrap gap-2">
96
+
{data
97
+
.filter((person) => person.team === team)
98
+
.map((person) => (
99
+
person.team === TeamType.Blahaj
100
+
?
101
+
<Person
102
+
key={person.name}
103
+
username={person.name.toLowerCase()}
104
+
globalName={person.name}
105
+
avatarUrl={person.avatarUrl}
106
+
social={"social" in person ? person.social as string : undefined}
107
+
/>
108
+
:
109
+
<PersonUser
110
+
key={person.id}
111
+
id={person.id}
112
+
social={"social" in person ? person.social as string : undefined}
113
+
/>
114
+
))
115
+
}
116
+
</div>
117
+
</div>
118
+
))}
119
+
</div>
120
+
121
+
</div>
122
+
);
123
+
}
124
+
125
+
async function PersonUser({
126
+
id,
127
+
social
128
+
}: {
129
+
id: string;
130
+
social?: string;
131
+
}) {
132
+
const user = await getUser(id);
133
+
134
+
if (!user) return <></>;
135
+
136
+
return (
137
+
<Person
138
+
username={user.username}
139
+
globalName={user.globalName}
140
+
social={social}
141
+
avatarUrl={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.${user.avatar?.startsWith("a_") ? "gif" : "webp"}?size=64`}
142
+
/>
143
+
);
144
+
}
145
+
146
+
function Person({
147
+
username,
148
+
globalName,
149
+
avatarUrl,
150
+
social
151
+
}: {
152
+
username: string;
153
+
globalName: string | null;
154
+
avatarUrl: string;
155
+
social?: string;
156
+
}) {
157
+
return (
158
+
<Link
159
+
className={cn(
160
+
"flex items-center gap-3 h-16 p-2 pr-4 bg-wamellow rounded-full cursor-default",
161
+
social && "duration-100 outline-violet-500 hover:outline cursor-pointer"
162
+
)}
163
+
href={social || "#"}
164
+
target={social && "_blank"}
165
+
>
166
+
<Image
167
+
alt={username}
168
+
className="rounded-full shrink-0 aspect-square"
169
+
height={48}
170
+
src={avatarUrl}
171
+
width={48}
172
+
/>
173
+
174
+
<div className="mr-2">
175
+
<div className="text-lg text-neutral-200 font-medium -mb-1.5">{globalName}</div>
176
+
<span className="opacity-75">@{username}</span>
177
+
</div>
178
+
179
+
{social && <HiExternalLink className="w-5 h-5" />}
180
+
</Link>
181
+
);
182
+
}
+9
lib/filter-duplicates.ts
+9
lib/filter-duplicates.ts
public/lauren.webp
public/lauren.webp
This is a binary file and will not be displayed.
public/lea.webp
public/lea.webp
This is a binary file and will not be displayed.
public/lucy.webp
public/lucy.webp
This is a binary file and will not be displayed.