feat: adds reason param for server errors

app/_components/Posts.tsx

@@ -7,6 +7,7 @@ import { FiLoader } from "react-icons/fi";
 import ServerError from "@/app/_components/ServerError";
 import { usePosts } from "@/app/_hooks/usePosts";
 import { getGalleryImages } from "@/app/_lib/utils";
+import { AxiosError } from "axios";
 
 type Props = {
   queryKey: string[];
@@ -43,7 +44,9 @@ export default function Posts(props: Props) {
     <div>
       {isError ? (
         <ServerError
-          statusCode={error instanceof Error ? error.message : "Internal"}
+          reason={
+            error instanceof AxiosError ? error.response?.data.reason : ""
+          }
         />
       ) : (
         <main

app/_components/ServerError.tsx

@@ -1,27 +1,24 @@
 import { Button } from "@/components/Button";
 
 type Props = {
-  statusCode: string;
+  reason: string;
 };
 
 export default function ServerError(props: Props) {
-  const { statusCode } = props;
+  const { reason } = props;
 
-  const getMessage = (code: string) => {
-    switch (code) {
-      case "Not Found":
-        return "This account has been banned or the username is incorrect.";
-      case "Forbidden":
-        return "This account has been suspended.";
-      case "Internal":
+  const getMessage = () => {
+    switch (reason) {
+      case "private":
+        return "This is a private community. Only approved members can view and contribute.";
       default:
         return "Internal server error";
     }
   };
 
   return (
     <div className="flex h-[calc(100vh_-_49px)] flex-col items-center justify-center p-4">
-      <h2 className="mb-4 text-lg">{getMessage(statusCode)}</h2>
+      <h2 className="mb-4 text-lg">{getMessage()}</h2>
       <Button as="link" href="/">
         Go home
       </Button>