The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
improve user header dropdown
+62
-34
+2
-2
app/layout.tsx
+2
-2
app/layout.tsx
···
44
44
},
45
45
46
46
description,
47
-
keywords: ["discord", "bot", "app", "intefration", "discord bot", "waya", "waya bot", "waya.one", "mwya", "mellow", "wamellow", "mwlica", "lunish.nl", "Luna-devv", "mee6 alternative", "arcane alternative", "dyno alternative", "starboard", "ranks", "leaderboards", "text to speech", "captcha", "passport", "verification", "verify", "captcha.bot", "security", "tts", "text to speech", "free", "customizable", "next-gen", "next generation", "ai", "ai images", "nsfw detection", "moderation", "anime", "nekos", "waifus", "chat to speech"],
47
+
keywords: ["discord", "bot", "app", "intefration", "discord bot", "waya", "waya bot", "waya.one", "mwya", "mellow", "wamellow", "mwlica", "lunish.nl", "Luna-devv", "mee6 alternative", "arcane alternative", "dyno alternative", "starboard", "ranks", "leaderboard", "lb", "leaderboards", "text to speech", "captcha", "passport", "verification", "verify", "captcha.bot", "security", "tts", "text to speech", "free", "customizable", "next-gen", "next generation", "ai", "ai images", "nsfw detection", "moderation", "anime", "nekos", "waifus", "chat to speech", "liapew"],
48
48
49
49
alternates: {
50
50
canonical: getBaseUrl()
···
99
99
100
100
<nav className="p-4 flex items-center gap-2 text-base font-medium dark:text-neutral-300 text-neutral-700 select-none mt-7 h-20">
101
101
<Link href="/" className={`${montserrat.className} font-semibold flex items-center mr-2`}>
102
-
<Image src="/waya-v3-small.webp" width={34} height={34} alt="" className="rounded-full mr-2" />
102
+
<Image src="/waya-v3-small.webp" width={64} height={64} alt="" className="rounded-full mr-2 w-8 h-8" />
103
103
<span className="text-xl dark:text-neutral-100 text-neutral-900">Wamellow</span>
104
104
</Link>
105
105
+11
-3
app/leaderboard/[guildId]/page.tsx
+11
-3
app/leaderboard/[guildId]/page.tsx
···
1
-
import { CircularProgress } from "@nextui-org/react";
1
+
import { Chip, CircularProgress } from "@nextui-org/react";
2
2
import { cookies } from "next/headers";
3
3
import Image from "next/image";
4
+
import { HiBadgeCheck } from "react-icons/hi";
4
5
5
6
import ImageReduceMotion from "@/components/image-reduce-motion";
6
7
import { AddButton, HomeButton, ScreenMessage, SupportButton } from "@/components/screen-message";
···
105
106
>
106
107
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${member.id}/${member.avatar}`} size={128} alt={`${member.username}'s profile picture`} className="rounded-full h-12 w-12 mr-3" />
107
108
<div>
108
-
<div className="text-xl font-medium dark:text-neutral-200 text-neutral-800">{member.globalName || member.username || "Unknown user"}</div>
109
-
<div className="text-sm dark:text-neutral-300 text-neutral-700">@{member.username}</div>
109
+
<div className="flex items-center gap-2">
110
+
<span className="text-xl font-medium dark:text-neutral-200 text-neutral-800">{member.globalName || member.username || "Unknown user"}</span>
111
+
{member.id === "821472922140803112" &&
112
+
<Chip color="secondary" size="sm" variant="flat" startContent={<HiBadgeCheck className="h-3.5 w-3.5 mr-1" />}>
113
+
<span className="font-bold">Developer</span>
114
+
</Chip>
115
+
}
116
+
</div>
117
+
<span className="text-sm dark:text-neutral-300 text-neutral-700">@{member.username}</span>
110
118
</div>
111
119
112
120
<div className="ml-auto flex text-xl font-medium dark:text-neutral-200 text-neutral-800">
+49
-29
components/header.tsx
+49
-29
components/header.tsx
···
1
1
"use client";
2
2
3
-
import { Button, Skeleton } from "@nextui-org/react";
3
+
import { Button, Chip, Skeleton, Switch, Tooltip } from "@nextui-org/react";
4
4
import { AnimatePresence, motion, MotionConfig } from "framer-motion";
5
5
import Link from "next/link";
6
6
import { usePathname } from "next/navigation";
7
7
import React, { useEffect, useState } from "react";
8
-
import { HiArrowNarrowRight, HiBeaker, HiChartPie, HiChevronDown, HiEyeOff, HiIdentification, HiViewGridAdd } from "react-icons/hi";
8
+
import { HiBadgeCheck, HiBeaker, HiChartPie, HiChevronDown, HiEyeOff, HiIdentification, HiLogout, HiViewGridAdd } from "react-icons/hi";
9
9
10
10
import { guildStore } from "@/common/guilds";
11
11
import { userStore } from "@/common/user";
···
58
58
<button className={cn("ml-auto flex dark:hover:bg-wamellow hover:bg-wamellow-100 py-2 px-4 rounded-md duration-200 items-center", menu && "dark:bg-wamellow bg-wamellow-100")} onClick={() => setMenu(!menu)}>
59
59
60
60
<Skeleton isLoaded={!!user?.id} className="rounded-full mr-2 h-[30px] w-[30px]">
61
-
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}`} size={64} alt="your avatar" />
61
+
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}`} size={96} alt="your avatar" />
62
62
</Skeleton>
63
63
64
64
{!user?.id ?
···
76
76
const split = { type: "split" };
77
77
78
78
const buttons = [
79
+
split,
79
80
{
80
81
name: "Dashboard",
81
82
icon: <HiViewGridAdd />,
···
119
120
]
120
121
:
121
122
[]
122
-
),
123
-
split
123
+
)
124
124
];
125
125
126
126
const UserDropdown = (
···
141
141
}
142
142
}}
143
143
className="
144
-
relative top-2 sm:right-56 w-full sm:w-60 dark:bg-wamellow bg-wamellow-100 rounded-md text-base overflow-hidden shadow-md
145
-
flex flex-col pt-1
146
-
max-sm:[--y-closed:-16px] [--opacity-closed:0%] sm:[--scale-closed:90%]
147
-
max-sm:[--y-open:0px] [--opacity-open:100%] sm:[--scale-open:100%]
144
+
relative top-2 sm:right-[268px] w-full sm:w-72 dark:bg-wamellow bg-wamellow-100 rounded-xl text-base overflow-hidden shadow-md
145
+
flex flex-col py-2 sm:py-1 p-2 sm:p-0
146
+
[--y-closed:-16px] [--opacity-closed:0%] sm:[--scale-closed:90%]
147
+
[--y-open:0px] [--opacity-open:100%] sm:[--scale-open:100%]
148
148
"
149
149
>
150
+
<div className="flex items-center space-x-3 px-4 py-2">
151
+
<Skeleton isLoaded={!!user?.id} className="rounded-full h-14 w-14 sm:h-10 sm:w-10 shrink-0">
152
+
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}`} size={128} alt="your avatar" />
153
+
</Skeleton>
154
+
<div className="w-full">
155
+
<div className="dark:text-neutral-200 text-neutral-800 truncate max-w-44 flex items-center gap-2">
156
+
<span className="font-medium text-xl sm:text-base">{user?.global_name || `@${user?.username}`}</span>
157
+
{user?.id === "821472922140803112" &&
158
+
<Chip color="secondary" size="sm" variant="flat" startContent={<HiBadgeCheck className="h-3.5 w-3.5 mr-1" />}>
159
+
<span className="font-bold">Developer</span>
160
+
</Chip>
161
+
}
162
+
</div>
163
+
<div className="text-neutral-500 dark:text-neutral-400 max-w-40 truncate">
164
+
<span className="text-medium sm:text-sm">@{user?.username}</span>
165
+
</div>
166
+
</div>
167
+
<Tooltip content="Logout" closeDelay={0} showArrow>
168
+
<Link href="/login?logout=true" className="ml-auto text-red-500 m-4">
169
+
<HiLogout className="h-6 w-6 sm:h-4 sm:w-4" />
170
+
</Link>
171
+
</Tooltip>
172
+
</div>
173
+
150
174
{buttons.map((button, i) => {
151
175
if ("type" in button && button.type === "split") {
152
176
return <hr key={"headerButton-" + button.type + i} className="my-1 mx-0 dark:border-wamellow-light border-wamellow-100-light" />;
···
158
182
key={"headerButton-" + button.name + button.url}
159
183
as={Link}
160
184
href={button.url}
161
-
className="w-full !justify-start"
185
+
className="w-full font-medium !justify-start !text-xl !my-1 sm:!text-medium sm:!my-0"
162
186
onClick={() => setMenu(false)}
163
187
startContent={button.icon}
164
188
>
···
174
198
className="flex items-center px-4 pt-2 pb-3"
175
199
>
176
200
{button.icon}
177
-
<span className="ml-2">{button.name}</span>
178
-
<label className="ml-auto relative inline-flex items-center cursor-pointer">
179
-
<input
180
-
type="checkbox"
181
-
className="sr-only peer"
182
-
checked={button.value}
183
-
onClick={button.onChange}
184
-
/>
185
-
<div
186
-
className="w-11 h-6 bg-neutral-300 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-violet-600"
187
-
/>
188
-
</label>
201
+
<span className="ml-2 text-xl my-1 sm:text-medium sm:my-0">{button.name}</span>
202
+
<Switch
203
+
key={"headerButton-" + button.name}
204
+
className="ml-auto"
205
+
isSelected={button.value}
206
+
onValueChange={button.onChange}
207
+
aria-label={button.name}
208
+
color="secondary"
209
+
size="sm"
210
+
/>
189
211
</div>
212
+
190
213
);
191
214
}
192
215
193
216
})}
194
-
195
-
<Link href="/login?logout=true" className="hover:bg-danger dark:text-red-400 text-red-500 dark:hover:text-red-100 hover:text-neutral-800 pt-2 pb-3 px-4 w-full duration-200 flex items-center" onClick={() => setMenu(false)}>
196
-
<HiArrowNarrowRight />
197
-
<span className="ml-2">Logout</span>
198
-
</Link>
199
217
</motion.div>
200
218
);
201
219
···
213
231
>
214
232
<AnimatePresence initial={false}>
215
233
{user?.id && menu &&
216
-
<div className="pr-4 flex text-base font-medium dark:text-neutral-300 text-neutral-700 select-none overflow-x-hidden">
217
-
<div className="ml-auto overflow-x-hidden"><div className="absolute left-0 sm:left-auto px-4 sm:px-0 z-40 w-full">{UserDropdown}</div></div>
234
+
<div className="pr-4 flex text-base font-medium dark:text-neutral-300 text-neutral-700 overflow-x-hidden">
235
+
<div className="ml-auto">
236
+
<div className="absolute left-0 sm:left-auto px-4 sm:px-0 z-40 w-full">{UserDropdown}</div>
237
+
</div>
218
238
</div>
219
239
}
220
240
</AnimatePresence>