feat(web): error page

apps/web/src/app/error.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+// Error components must be Client Components
+import * as React from "react";
+import { signOut } from "next-auth/react";
+import { RiAlarmWarningFill } from "react-icons/ri";
+
+import { Button } from "@tanya.in/ui/button";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const isUnauthorized = error.message?.includes("Unauthorized");
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center space-y-4 text-center ">
+      <RiAlarmWarningFill
+        size={60}
+        className="drop-shadow-glow animate-flicker text-danger"
+      />
+      <h1>{error.message ?? "Oops, something went wrong!"}</h1>
+      <Button
+        onClick={async () => {
+          if (isUnauthorized) return await signOut();
+          reset();
+        }}
+      >
+        {isUnauthorized ? "Go to sign in page" : "Try again"}
+      </Button>
+    </div>
+  );
+}

apps/web/tailwind.config.ts

@@ -14,6 +14,27 @@ export default {
         sans: ["var(--font-geist-sans)", ...fontFamily.sans],
         mono: ["var(--font-geist-mono)", ...fontFamily.mono],
       },
+      keyframes: {
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
+        flicker: {
+          "0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%": {
+            opacity: "0.99",
+            filter:
+              "drop-shadow(0 0 1px rgba(252, 211, 77)) drop-shadow(0 0 15px rgba(245, 158, 11)) drop-shadow(0 0 1px rgba(252, 211, 77))",
+          },
+          "20%, 21.999%, 63%, 63.999%, 65%, 69.999%": {
+            opacity: "0.4",
+            filter: "none",
+          },
+        },
+      },
+      animation: {
+        "caret-blink": "caret-blink 1.2s ease-out infinite",
+        flicker: "flicker 3s linear infinite",
+      },
     },
   },
 } satisfies Config;