The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
better error message design
+165
-76
+1
-18
app/dashboard/[guildId]/[...not-found]/page.tsx
+1
-18
app/dashboard/[guildId]/[...not-found]/page.tsx
···
1
-
"use client";
2
-
3
-
import { HiViewGridAdd } from "react-icons/hi";
4
-
5
-
import { guildStore } from "@/common/guilds";
6
-
import { ScreenMessage } from "@/components/screen-message";
7
-
8
1
export default function NotFound() {
9
-
const guild = guildStore((g) => g);
10
-
11
-
return (
12
-
<ScreenMessage
13
-
title="Nothing to see here.."
14
-
description="Seems like you got a little lost, huh?"
15
-
href={`/dashboard/${guild?.id}`}
16
-
button="Go back to overview"
17
-
icon={<HiViewGridAdd />}
18
-
/>
19
-
);
2
+
return <></>;
20
3
}
+26
-8
app/dashboard/[guildId]/layout.tsx
+26
-8
app/dashboard/[guildId]/layout.tsx
···
1
1
"use client";
2
2
3
3
import { Skeleton } from "@nextui-org/react";
4
+
import Image from "next/image";
4
5
import Link from "next/link";
5
6
import { useParams, usePathname } from "next/navigation";
6
7
import { useEffect, useState } from "react";
···
11
12
import { CopyToClipboardButton } from "@/components/copy-to-clipboard";
12
13
import ImageReduceMotion from "@/components/image-reduce-motion";
13
14
import { ListTab } from "@/components/list";
14
-
import { ScreenMessage } from "@/components/screen-message";
15
+
import { AddButton, ScreenMessage, SupportButton } from "@/components/screen-message";
16
+
import { ServerButton } from "@/components/server-button";
17
+
import SadWumpusPic from "@/public/sad-wumpus.gif";
15
18
import { ApiV1GuildsChannelsGetResponse, ApiV1GuildsEmojisGetResponse, ApiV1GuildsGetResponse, ApiV1GuildsRolesGetResponse, RouteErrorResponse } from "@/typings";
16
19
import { getCanonicalUrl } from "@/utils/urls";
17
20
···
176
179
</Skeleton>
177
180
178
181
{!guild?.id ?
179
-
<div>
180
-
<Skeleton className="rounded-xl w-32 h-5 mb-2" />
182
+
<div className="mt-1.5">
183
+
<Skeleton className="rounded-xl w-32 h-6 mb-2" />
181
184
<Skeleton className="rounded-xl w-10 h-3.5" />
182
185
</div>
183
186
:
···
239
242
240
243
{error ?
241
244
<ScreenMessage
242
-
title="Something went wrong.."
245
+
title={error.includes("permssions")
246
+
? "Something went wrong on this page.."
247
+
: "You cannot access this page.."
248
+
}
243
249
description={error}
244
-
href="/dashboard"
245
-
button="Go back to server list"
246
-
icon={<HiViewGridAdd />}
247
-
/>
250
+
buttons={<>
251
+
<ServerButton
252
+
as={Link}
253
+
href="/dashboard"
254
+
startContent={<HiViewGridAdd />}
255
+
>
256
+
Go back to Dashboard
257
+
</ServerButton>
258
+
{error.includes("permissions")
259
+
? <AddButton />
260
+
: <SupportButton />
261
+
}
262
+
</>}
263
+
>
264
+
<Image src={SadWumpusPic} alt="" height={141} width={124} />
265
+
</ScreenMessage>
248
266
:
249
267
guild?.id ? children : <></>
250
268
}
+27
-16
app/leaderboard/[guildId]/page.tsx
+27
-16
app/leaderboard/[guildId]/page.tsx
···
1
1
import { CircularProgress } from "@nextui-org/react";
2
2
import { cookies } from "next/headers";
3
-
import { HiHome } from "react-icons/hi";
3
+
import Image from "next/image";
4
4
5
5
import ImageReduceMotion from "@/components/image-reduce-motion";
6
-
import { ScreenMessage } from "@/components/screen-message";
6
+
import { AddButton, HomeButton, ScreenMessage, SupportButton } from "@/components/screen-message";
7
+
import SadWumpusPic from "@/public/sad-wumpus.gif";
7
8
import cn from "@/utils/cn";
8
9
9
10
import { getDesign, getGuild, getPagination, getTopMembers } from "./api";
···
35
36
if (error) {
36
37
return (
37
38
<ScreenMessage
38
-
title="Something went wrong.."
39
+
top="0rem"
40
+
title="Something went wrong on this page.."
39
41
description={error}
40
-
href="/"
41
-
button="Go back home"
42
-
icon={<HiHome />}
43
-
top="0rem"
44
-
/>
42
+
buttons={<>
43
+
<HomeButton />
44
+
<SupportButton />
45
+
</>}
46
+
>
47
+
<Image src={SadWumpusPic} alt="" height={141} width={124} />
48
+
</ScreenMessage>
45
49
);
46
50
}
47
51
···
50
54
if (!candisplay) {
51
55
return (
52
56
<ScreenMessage
53
-
title="Nothing to see here.."
54
-
description="Seems like you got a little lost, huh?"
55
-
href="/"
56
-
button="Go back home"
57
-
icon={<HiHome />}
58
57
top="0rem"
59
-
/>
58
+
title="Sadly, this leaderboard can not be found.."
59
+
description="Seems like you got a little lost here? Here's wumpus for now!"
60
+
buttons={<>
61
+
<HomeButton />
62
+
<AddButton />
63
+
</>}
64
+
>
65
+
<Image src={SadWumpusPic} alt="" height={141 * 1.5} width={124 * 1.5} />
66
+
</ScreenMessage>
60
67
);
61
68
}
62
69
63
70
if (!members.length) {
64
71
return (
65
72
<ScreenMessage
66
-
title="None seems to be here.."
67
-
description={"No members could be found on page " + searchParams.page || "1"}
68
73
top="0rem"
74
+
title="No members to see here.."
75
+
description={"No members could be found on page " + searchParams.page || "1"}
76
+
buttons={<>
77
+
<HomeButton />
78
+
<AddButton />
79
+
</>}
69
80
/>
70
81
);
71
82
}
+12
-10
app/not-found.tsx
+12
-10
app/not-found.tsx
···
1
-
1
+
import Image from "next/image";
2
2
3
-
import { HiHome } from "react-icons/hi";
4
-
5
-
import { ScreenMessage } from "@/components/screen-message";
3
+
import { AddButton, HomeButton, ScreenMessage } from "@/components/screen-message";
4
+
import SadWumpusPic from "@/public/sad-wumpus.gif";
6
5
7
6
export default function NotFound() {
8
7
return (
9
8
<ScreenMessage
10
-
title="Nothing to see here.."
11
-
description="Seems like you got a little lost, huh?"
12
-
href="/"
13
-
button="Go back home"
14
-
icon={<HiHome />}
15
-
/>
9
+
title="Sadly, this page can not be found.."
10
+
description="Seems like you got a little lost here? Here's wumpus for now!"
11
+
buttons={<>
12
+
<HomeButton />
13
+
<AddButton />
14
+
</>}
15
+
>
16
+
<Image src={SadWumpusPic} alt="" height={141 * 1.5} width={124 * 1.5} />
17
+
</ScreenMessage>
16
18
);
17
19
}
+1
-14
app/profile/[...not-found]/page.tsx
+1
-14
app/profile/[...not-found]/page.tsx
···
1
-
import { HiIdentification } from "react-icons/hi";
2
-
3
-
import { ScreenMessage } from "@/components/screen-message";
4
-
5
1
export default function NotFound() {
6
-
7
-
return (
8
-
<ScreenMessage
9
-
title="Nothing to see here.."
10
-
description="Seems like you got a little lost, huh?"
11
-
href="/profile"
12
-
button="Go back to overview"
13
-
icon={<HiIdentification />}
14
-
/>
15
-
);
2
+
return <></>;
16
3
}
+11
-6
app/profile/layout.tsx
+11
-6
app/profile/layout.tsx
···
1
1
"use client";
2
2
3
3
import { Skeleton } from "@nextui-org/react";
4
+
import Image from "next/image";
4
5
import { useEffect, useState } from "react";
5
6
import CountUp from "react-countup";
6
7
import { HiChartPie, HiHome, HiMusicNote, HiPhotograph, HiTranslate } from "react-icons/hi";
···
8
9
import { userStore } from "@/common/user";
9
10
import ImageReduceMotion from "@/components/image-reduce-motion";
10
11
import { ListTab } from "@/components/list";
11
-
import { ScreenMessage } from "@/components/screen-message";
12
+
import { HomeButton, ScreenMessage, SupportButton } from "@/components/screen-message";
13
+
import SadWumpusPic from "@/public/sad-wumpus.gif";
12
14
import { ApiV1MeGetResponse, RouteErrorResponse } from "@/typings";
13
15
import decimalToRgb from "@/utils/decimalToRgb";
14
16
···
147
149
148
150
{error ?
149
151
<ScreenMessage
150
-
title="Something went wrong.."
152
+
title="Something went wrong on this page.."
151
153
description={error}
152
-
href="/"
153
-
button="Go back home"
154
-
icon={<HiHome />}
155
-
/>
154
+
buttons={<>
155
+
<HomeButton />
156
+
<SupportButton />
157
+
</>}
158
+
>
159
+
<Image src={SadWumpusPic} alt="" height={141} width={124} />
160
+
</ScreenMessage>
156
161
:
157
162
user?.id ? children : <></>
158
163
}
+87
-4
components/screen-message.tsx
+87
-4
components/screen-message.tsx
···
1
1
import { Button } from "@nextui-org/react";
2
2
import Link from "next/link";
3
+
import { BsDiscord } from "react-icons/bs";
4
+
import { HiHome } from "react-icons/hi";
3
5
4
6
import cn from "@/utils/cn";
5
7
6
8
import { ServerButton } from "./server-button";
7
9
8
-
type Props = { icon?: React.ReactNode; title: string; description: string; button?: string; top?: string; } & React.ComponentProps<typeof Button>;
10
+
type Props = {
11
+
title: string;
12
+
description: string;
13
+
top?: string;
14
+
15
+
/**
16
+
* @deprecated
17
+
*/
18
+
icon?: React.ReactNode;
19
+
/**
20
+
* @deprecated
21
+
*/
22
+
button?: string;
9
23
10
-
export function ScreenMessage({ icon, title, description, button, top = "20vh", ...props }: Props) {
24
+
buttons?: React.ReactNode;
25
+
children?: React.ReactNode;
26
+
} & React.ComponentProps<typeof Button>;
27
+
28
+
export function ScreenMessage({
29
+
title,
30
+
description,
31
+
top = "16vh",
32
+
33
+
icon,
34
+
button,
35
+
36
+
buttons,
37
+
children,
38
+
...props
39
+
}: Props) {
11
40
12
41
return (
13
42
<div className="w-full h-full flex flex-col items-center justify-center" style={{ marginTop: top }}>
43
+
44
+
{children &&
45
+
<div className={cn("relative bottom-8", buttons ? "ml-8" : "ml-4")}>
46
+
{children}
47
+
</div>
48
+
}
49
+
14
50
<div>
15
51
16
-
<div className="mb-10 flex flex-col items-center text-center">
52
+
<div className="mb-8 flex flex-col items-center text-center">
17
53
<span className="text-4xl dark:text-neutral-100 text-neutral-900 font-semibold">{title}</span> <br />
18
-
<span className="text-lg dark:text-neutral-400 text-neutral-600 font-semibold">{description}</span>
54
+
<span className="text-lg dark:text-neutral-400 text-neutral-600 font-semibold -mt-2">{description}</span>
19
55
</div>
20
56
21
57
{(button && props.href) &&
···
31
67
</div>
32
68
}
33
69
70
+
{buttons &&
71
+
<div className="w-full flex flex-col items-center">
72
+
<div className="flex flex-wrap gap-2">
73
+
{buttons}
74
+
</div>
75
+
</div>
76
+
}
77
+
34
78
</div>
79
+
35
80
</div>
81
+
);
82
+
}
83
+
84
+
export function HomeButton() {
85
+
return (
86
+
<ServerButton
87
+
as={Link}
88
+
href="/"
89
+
startContent={<HiHome />}
90
+
>
91
+
Go back to Home
92
+
</ServerButton>
93
+
);
94
+
}
95
+
96
+
export function AddButton() {
97
+
return (
98
+
<ServerButton
99
+
as={Link}
100
+
className="button-primary"
101
+
href="/login?invite=true"
102
+
startContent={<BsDiscord />}
103
+
>
104
+
Add bot to your server
105
+
</ServerButton>
106
+
);
107
+
}
108
+
109
+
export function SupportButton() {
110
+
return (
111
+
<ServerButton
112
+
as={Link}
113
+
className="button-primary"
114
+
href="/support"
115
+
startContent={<BsDiscord />}
116
+
>
117
+
Join support server
118
+
</ServerButton>
36
119
);
37
120
}
public/sad-wumpus.gif
public/sad-wumpus.gif
This is a binary file and will not be displayed.