The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix dash selectable image
+28
-11
+20
-6
app/dashboard/page.tsx
+20
-6
app/dashboard/page.tsx
···
189
189
}}
190
190
className="dark:bg-wamellow bg-wamellow-100 p-4 flex items-center rounded-lg drop-shadow-md overflow-hidden relative h-24 duration-100 outline-violet-500 hover:outline group/card"
191
191
>
192
-
<ImageReduceMotion url={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}`} size={24} alt="" forceStatic={true} className="absolute top-[-48px] left-0 w-full z-0 blur-xl opacity-30" />
192
+
<ImageReduceMotion
193
+
alt=""
194
+
className="absolute top-[-48px] left-0 w-full z-0 blur-xl opacity-30 pointer-events-none"
195
+
size={24}
196
+
url={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}`}
197
+
forceStatic={true}
198
+
/>
193
199
194
-
<ImageReduceMotion url={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}`} size={56} alt={`Server icon of @${guild.name}`} className="rounded-lg h-14 w-14 z-1 relative drop-shadow-md" />
200
+
<ImageReduceMotion
201
+
alt={`Server icon of @${guild.name}`}
202
+
className="rounded-lg h-14 w-14 z-1 relative drop-shadow-md"
203
+
size={56}
204
+
url={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}`}
205
+
/>
206
+
195
207
<div className="ml-3 text-sm relative bottom-1">
196
-
<div className="text-lg dark:text-neutral-200 font-medium text-neutral-800 mb-1 sm:max-w-64 lg:max-w-56 truncate">{guild.name}</div>
197
-
<span className="flex gap-2">
208
+
<span className="text-lg dark:text-neutral-200 font-medium text-neutral-800 mb-1 sm:max-w-64 lg:max-w-56 truncate">
209
+
{guild.name}
210
+
</span>
211
+
<div className="flex gap-2">
198
212
<ManageButton guildId={guild.id} />
199
213
<LeaderboardButton guildId={guild.id} />
200
-
</span>
214
+
</div>
201
215
</div>
202
216
203
217
</motion.li>
···
263
277
<Button
264
278
as={Link}
265
279
href={`/leaderboard/${guildId}`}
266
-
className="default dark:bg-neutral-500/40 hover:dark:bg-neutral-500/20 bg-neutral-400/40 hover:bg-neutral-400/20 text-sm h-9 opacity-0 group-hover/card:opacity-100"
280
+
className="default dark:bg-neutral-500/40 hover:dark:bg-neutral-500/20 bg-neutral-400/40 hover:bg-neutral-400/20 text-sm h-9 md:opacity-0 group-hover/card:opacity-100"
267
281
>
268
282
Leaderboard
269
283
</Button>
+8
-5
components/image-reduce-motion.tsx
+8
-5
components/image-reduce-motion.tsx
···
1
1
"use client";
2
2
import Image from "next/image";
3
-
import { FunctionComponent } from "react";
4
3
5
4
import { webStore } from "@/common/webstore";
6
5
···
12
11
forceStatic?: boolean
13
12
}
14
13
15
-
const ImageReduceMotion: FunctionComponent<Props> = ({ url, size, alt, className, forceStatic }) => {
14
+
export default function ImageReduceMotion({ url,
15
+
size,
16
+
alt,
17
+
className,
18
+
forceStatic
19
+
}: Props) {
16
20
const web = webStore((w) => w);
17
21
18
22
return (
···
24
28
alt={alt}
25
29
className={className}
26
30
loading="lazy"
31
+
draggable={false}
27
32
/>
28
33
);
29
34
30
-
};
31
-
32
-
export default ImageReduceMotion;
35
+
}