The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
new leaderboard banner design
+24
-11
+15
-7
app/leaderboard/[guildId]/layout.tsx
+15
-7
app/leaderboard/[guildId]/layout.tsx
···
81
81
</style>
82
82
}
83
83
84
-
<div className="relative mb-12 w-full">
85
-
<div className="h-32 md:h-64 overflow-hidden rounded-xl" style={{ background: `url(${design?.banner})`, backgroundRepeat: "no-repeat", backgroundSize: "cover" }}>
86
-
{!design?.banner &&
87
-
<Image src="/paint.jpg" width={3840 / 2} height={2160 / 2} alt="" />
88
-
}
89
-
</div>
84
+
<div className="relative mb-14 w-full">
85
+
<Image
86
+
alt=""
87
+
as={NextImage}
88
+
className="w-full object-cover"
89
+
classNames={{ img: "h-36 md:h-64", blurredImg: "h-40 md:h-72 -top-5" }}
90
+
isBlurred
91
+
src={design?.banner || "/paint.jpg"}
92
+
width={3840 / 2}
93
+
height={2160 / 2}
94
+
/>
90
95
91
-
<div style={{ backgroundColor: "var(--background-rgb)" }} className="text-lg flex gap-5 items-center absolute bottom-[-44px] md:bottom-[-34px] left-[-6px] md:left-10 py-4 px-5 rounded-tr-3xl md:rounded-3xl">
96
+
<div
97
+
// style={{ backgroundColor: "var(--background-rgb)" }}
98
+
className="text-lg flex gap-5 items-center absolute bottom-[-44px] md:bottom-[-34px] left-[12px] md:left-10 py-4 px-5 rounded-3xl z-20 backdrop-blur-3xl backdrop-brightness-75 shadow-md"
99
+
>
92
100
<ImageReduceMotion url={`https://cdn.discordapp.com/icons/${guild?.id}/${guild?.icon}`} size={128} alt="Server icon" className="rounded-full h-14 w-14 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40" />
93
101
<div className="flex flex-col gap-1">
94
102
<div className="text-2xl dark:text-neutral-200 text-neutral-800 font-medium">{guild?.name || "Unknown Server"}</div>
+5
-2
app/profile/layout.tsx
+5
-2
app/profile/layout.tsx
···
10
10
import { ListTab } from "@/components/list";
11
11
import { ScreenMessage } from "@/components/screen-message";
12
12
import { ApiV1MeGetResponse, RouteErrorResponse } from "@/typings";
13
+
import decimalToRgb from "@/utils/decimalToRgb";
13
14
14
15
export default function RootLayout({
15
16
children
···
19
20
const user = userStore((g) => g);
20
21
21
22
const [error, setError] = useState<string>();
23
+
24
+
const accent = decimalToRgb(user?.accent_color as number);
22
25
23
26
useEffect(() => {
24
27
if (user?.extended !== undefined) return;
···
58
61
59
62
<div className="text-lg flex flex-col md:flex-row md:items-center">
60
63
<div className="flex gap-5">
61
-
<Skeleton isLoaded={!!user?.id} className="rounded-full h-14 w-14 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40 shrink-0">
62
-
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}`} size={128} alt="User" />
64
+
<Skeleton isLoaded={!!user?.id} className="rounded-full h-14 w-14 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40 shrink-0" style={user?.accent_color ? { "--tw-ring-color": `rgb(${accent.r}, ${accent.g}, ${accent.b})` } as React.CSSProperties : {}}>
65
+
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}`} size={128} alt="you" />
63
66
</Skeleton>
64
67
65
68
{!user?.id ?
+1
common/user.ts
+1
common/user.ts
+3
-2
components/Header.tsx
+3
-2
components/Header.tsx
···
12
12
import { webStore } from "@/common/webstore";
13
13
import LoginButton from "@/components/login-button";
14
14
import authorizeUser from "@/utils/authorize-user";
15
+
import cn from "@/utils/cn";
15
16
16
17
import ImageReduceMotion from "./image-reduce-motion";
17
18
···
54
55
55
56
56
57
const UserButton = (
57
-
<button className={`ml-auto flex ${menu && "dark:bg-wamellow bg-wamellow-100"} dark:hover:bg-wamellow hover:bg-wamellow-100 py-2 px-4 rounded-md duration-200 items-center`} onClick={() => setMenu(!menu)}>
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)}>
58
59
59
60
<Skeleton isLoaded={!!user?.id} className="rounded-full mr-2 h-[30px] w-[30px]">
60
61
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}`} size={64} alt="your avatar" />
···
213
214
<AnimatePresence initial={false}>
214
215
{user?.id && menu &&
215
216
<div className="pr-4 flex text-base font-medium dark:text-neutral-300 text-neutral-700 select-none overflow-x-hidden">
216
-
<div className="ml-auto overflow-x-hidden"><div className="absolute left-0 sm:left-auto px-4 sm:px-0 z-10 w-full">{UserDropdown}</div></div>
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>
217
218
</div>
218
219
}
219
220
</AnimatePresence>