better error message design

app/dashboard/[guildId]/[...not-found]/page.tsx

···
-"use client";
-
-import { HiViewGridAdd } from "react-icons/hi";
-
-import { guildStore } from "@/common/guilds";
-import { ScreenMessage } from "@/components/screen-message";
-
 export default function NotFound() {
-    const guild = guildStore((g) => g);
-
-    return (
-        <ScreenMessage
-            title="Nothing to see here.."
-            description="Seems like you got a little lost, huh?"
-            href={`/dashboard/${guild?.id}`}
-            button="Go back to overview"
-            icon={<HiViewGridAdd />}
-        />
-    );
+    return <></>;
 }

app/dashboard/[guildId]/layout.tsx

···
 "use client";
 
 import { Skeleton } from "@nextui-org/react";
+import Image from "next/image";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
···
 import { CopyToClipboardButton } from "@/components/copy-to-clipboard";
 import ImageReduceMotion from "@/components/image-reduce-motion";
 import { ListTab } from "@/components/list";
-import { ScreenMessage } from "@/components/screen-message";
+import { AddButton, ScreenMessage, SupportButton } from "@/components/screen-message";
+import { ServerButton } from "@/components/server-button";
+import SadWumpusPic from "@/public/sad-wumpus.gif";
 import { ApiV1GuildsChannelsGetResponse, ApiV1GuildsEmojisGetResponse, ApiV1GuildsGetResponse, ApiV1GuildsRolesGetResponse, RouteErrorResponse } from "@/typings";
 import { getCanonicalUrl } from "@/utils/urls";
 
···
                         </Skeleton>
 
                         {!guild?.id ?
-                            <div>
-                                <Skeleton className="rounded-xl w-32 h-5 mb-2" />
+                            <div className="mt-1.5">
+                                <Skeleton className="rounded-xl w-32 h-6 mb-2" />
                                 <Skeleton className="rounded-xl w-10 h-3.5" />
                             </div>
                             :
···
 
             {error ?
                 <ScreenMessage
-                    title="Something went wrong.."
+                    title={error.includes("permssions")
+                        ? "Something went wrong on this page.."
+                        : "You cannot access this page.."
+                    }
                     description={error}
-                    href="/dashboard"
-                    button="Go back to server list"
-                    icon={<HiViewGridAdd />}
-                />
+                    buttons={<>
+                        <ServerButton
+                            as={Link}
+                            href="/dashboard"
+                            startContent={<HiViewGridAdd />}
+                        >
+                            Go back to Dashboard
+                        </ServerButton>
+                        {error.includes("permissions")
+                            ? <AddButton />
+                            : <SupportButton />
+                        }
+                    </>}
+                >
+                    <Image src={SadWumpusPic} alt="" height={141} width={124} />
+                </ScreenMessage>
                 :
                 guild?.id ? children : <></>
             }

app/leaderboard/[guildId]/page.tsx

···
 import { CircularProgress } from "@nextui-org/react";
 import { cookies } from "next/headers";
-import { HiHome } from "react-icons/hi";
+import Image from "next/image";
 
 import ImageReduceMotion from "@/components/image-reduce-motion";
-import { ScreenMessage } from "@/components/screen-message";
+import { AddButton, HomeButton, ScreenMessage, SupportButton } from "@/components/screen-message";
+import SadWumpusPic from "@/public/sad-wumpus.gif";
 import cn from "@/utils/cn";
 
 import { getDesign, getGuild, getPagination, getTopMembers } from "./api";
···
     if (error) {
         return (
             <ScreenMessage
-                title="Something went wrong.."
+                top="0rem"
+                title="Something went wrong on this page.."
                 description={error}
-                href="/"
-                button="Go back home"
-                icon={<HiHome />}
-                top="0rem"
-            />
+                buttons={<>
+                    <HomeButton />
+                    <SupportButton />
+                </>}
+            >
+                <Image src={SadWumpusPic} alt="" height={141} width={124} />
+            </ScreenMessage>
         );
     }
 
···
     if (!candisplay) {
         return (
             <ScreenMessage
-                title="Nothing to see here.."
-                description="Seems like you got a little lost, huh?"
-                href="/"
-                button="Go back home"
-                icon={<HiHome />}
                 top="0rem"
-            />
+                title="Sadly, this leaderboard can not be found.."
+                description="Seems like you got a little lost here? Here's wumpus for now!"
+                buttons={<>
+                    <HomeButton />
+                    <AddButton />
+                </>}
+            >
+                <Image src={SadWumpusPic} alt="" height={141 * 1.5} width={124 * 1.5} />
+            </ScreenMessage>
         );
     }
 
     if (!members.length) {
         return (
             <ScreenMessage
-                title="None seems to be here.."
-                description={"No members could be found on page " + searchParams.page || "1"}
                 top="0rem"
+                title="No members to see here.."
+                description={"No members could be found on page " + searchParams.page || "1"}
+                buttons={<>
+                    <HomeButton />
+                    <AddButton />
+                </>}
             />
         );
     }

app/not-found.tsx

···
-
+import Image from "next/image";
 
-import { HiHome } from "react-icons/hi";
-
-import { ScreenMessage } from "@/components/screen-message";
+import { AddButton, HomeButton, ScreenMessage } from "@/components/screen-message";
+import SadWumpusPic from "@/public/sad-wumpus.gif";
 
 export default function NotFound() {
     return (
         <ScreenMessage
-            title="Nothing to see here.."
-            description="Seems like you got a little lost, huh?"
-            href="/"
-            button="Go back home"
-            icon={<HiHome />}
-        />
+            title="Sadly, this page can not be found.."
+            description="Seems like you got a little lost here? Here's wumpus for now!"
+            buttons={<>
+                <HomeButton />
+                <AddButton />
+            </>}
+        >
+            <Image src={SadWumpusPic} alt="" height={141 * 1.5} width={124 * 1.5} />
+        </ScreenMessage>
     );
 }

app/profile/[...not-found]/page.tsx

···
-import { HiIdentification } from "react-icons/hi";
-
-import { ScreenMessage } from "@/components/screen-message";
-
 export default function NotFound() {
-
-    return (
-        <ScreenMessage
-            title="Nothing to see here.."
-            description="Seems like you got a little lost, huh?"
-            href="/profile"
-            button="Go back to overview"
-            icon={<HiIdentification />}
-        />
-    );
+    return <></>;
 }

app/profile/layout.tsx

···
 "use client";
 
 import { Skeleton } from "@nextui-org/react";
+import Image from "next/image";
 import { useEffect, useState } from "react";
 import CountUp from "react-countup";
 import { HiChartPie, HiHome, HiMusicNote, HiPhotograph, HiTranslate } from "react-icons/hi";
···
 import { userStore } from "@/common/user";
 import ImageReduceMotion from "@/components/image-reduce-motion";
 import { ListTab } from "@/components/list";
-import { ScreenMessage } from "@/components/screen-message";
+import { HomeButton, ScreenMessage, SupportButton } from "@/components/screen-message";
+import SadWumpusPic from "@/public/sad-wumpus.gif";
 import { ApiV1MeGetResponse, RouteErrorResponse } from "@/typings";
 import decimalToRgb from "@/utils/decimalToRgb";
 
···
 
             {error ?
                 <ScreenMessage
-                    title="Something went wrong.."
+                    title="Something went wrong on this page.."
                     description={error}
-                    href="/"
-                    button="Go back home"
-                    icon={<HiHome />}
-                />
+                    buttons={<>
+                        <HomeButton />
+                        <SupportButton />
+                    </>}
+                >
+                    <Image src={SadWumpusPic} alt="" height={141} width={124} />
+                </ScreenMessage>
                 :
                 user?.id ? children : <></>
             }

components/screen-message.tsx

···
 import { Button } from "@nextui-org/react";
 import Link from "next/link";
+import { BsDiscord } from "react-icons/bs";
+import { HiHome } from "react-icons/hi";
 
 import cn from "@/utils/cn";
 
 import { ServerButton } from "./server-button";
 
-type Props = { icon?: React.ReactNode; title: string; description: string; button?: string; top?: string; } & React.ComponentProps<typeof Button>;
+type Props = {
+    title: string;
+    description: string;
+    top?: string;
+
+    /**
+     * @deprecated
+     */
+    icon?: React.ReactNode;
+    /**
+     * @deprecated
+     */
+    button?: string;
 
-export function ScreenMessage({ icon, title, description, button, top = "20vh", ...props }: Props) {
+    buttons?: React.ReactNode;
+    children?: React.ReactNode;
+} & React.ComponentProps<typeof Button>;
+
+export function ScreenMessage({
+    title,
+    description,
+    top = "16vh",
+
+    icon,
+    button,
+
+    buttons,
+    children,
+    ...props
+}: Props) {
 
     return (
         <div className="w-full h-full flex flex-col items-center justify-center" style={{ marginTop: top }}>
+
+            {children &&
+                <div className={cn("relative bottom-8", buttons ? "ml-8" : "ml-4")}>
+                    {children}
+                </div>
+            }
+
             <div>
 
-                <div className="mb-10 flex flex-col items-center text-center">
+                <div className="mb-8 flex flex-col items-center text-center">
                     <span className="text-4xl dark:text-neutral-100 text-neutral-900 font-semibold">{title}</span> <br />
-                    <span className="text-lg dark:text-neutral-400 text-neutral-600 font-semibold">{description}</span>
+                    <span className="text-lg dark:text-neutral-400 text-neutral-600 font-semibold -mt-2">{description}</span>
                 </div>
 
                 {(button && props.href) &&
···
                     </div>
                 }
 
+                {buttons &&
+                    <div className="w-full flex flex-col items-center">
+                        <div className="flex flex-wrap gap-2">
+                            {buttons}
+                        </div>
+                    </div>
+                }
+
             </div>
+
         </div>
+    );
+}
+
+export function HomeButton() {
+    return (
+        <ServerButton
+            as={Link}
+            href="/"
+            startContent={<HiHome />}
+        >
+            Go back to Home
+        </ServerButton>
+    );
+}
+
+export function AddButton() {
+    return (
+        <ServerButton
+            as={Link}
+            className="button-primary"
+            href="/login?invite=true"
+            startContent={<BsDiscord />}
+        >
+            Add bot to your server
+        </ServerButton>
+    );
+}
+
+export function SupportButton() {
+    return (
+        <ServerButton
+            as={Link}
+            className="button-primary"
+            href="/support"
+            startContent={<BsDiscord />}
+        >
+            Join support server
+        </ServerButton>
     );
 }