feat: add error page and not found page

app/projects/[project]/error.tsx

@@ -1,32 +1,86 @@
 "use client";
 
+import { AlertTriangle, Github, RefreshCcw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { useEffect } from "react";
-import { redirect } from "next/navigation";
+import { useParams } from "next/navigation";
 
-export default function Error({
-  error,
-  reset,
-}: {
-  error: Error;
+interface ErrorProps {
+  error: Error & { digest?: string };
   reset: () => void;
-}) {
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  const params = useParams();
+  const packageName = params?.project as string;
+
   useEffect(() => {
-    // Log the error to an error reporting service
-    console.error(error);
+    console.error("Package Error:", error);
   }, [error]);
 
   return (
-    <div>
-      <h2>Something went wrong!</h2>
-      <p>
-        There was an internal server error, please see submit or view issues{" "}
-        <a href="https://github.com/psincraian/pepy/issues">here</a>.
-      </p>
-      <p>Status details:</p>
-      <ul>
-        <li>Server message: {error.message}</li>
-      </ul>
-      <button onClick={() => redirect("/")}>Back home</button>
+    <div className="min-h-[calc(100vh-140px)] flex flex-col items-center justify-center px-4">
+      <div className="text-center max-w-2xl mx-auto">
+        <div className="mb-8">
+          <AlertTriangle className="h-24 w-24 text-red-500/20 mx-auto" />
+        </div>
+
+        <h1 className="text-4xl font-bold mb-4 text-red-600">
+          Something Went Wrong
+        </h1>
+
+        <p className="text-xl text-muted-foreground mb-4">
+          We encountered an error while fetching data for{" "}
+          <code className="px-2 py-1 bg-muted rounded font-mono">{packageName}</code>
+        </p>
+
+        <Alert variant="destructive" className="mb-8 max-w-xl mx-auto">
+          <AlertDescription className="text-sm">
+            Error: {error.message || "An unexpected error occurred"}
+          </AlertDescription>
+        </Alert>
+
+        <div className="space-y-6">
+          <div className="p-6 bg-muted/50 rounded-lg text-sm text-muted-foreground max-w-xl mx-auto">
+            <p className="font-medium mb-3">What you can try:</p>
+            <ol className="list-decimal list-inside space-y-2 text-left">
+              <li>Refresh the page to try again</li>
+              <li>Clear your browser cache and cookies</li>
+              <li>Check your internet connection</li>
+              <li>If the error persists, please report it on GitHub</li>
+            </ol>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Button
+              onClick={reset}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              <RefreshCcw className="h-4 w-4 mr-2" />
+              Try Again
+            </Button>
+            <Button
+              variant="outline"
+              asChild
+            >
+              <a
+                href="https://github.com/psincraian/pepy/issues/new"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center"
+              >
+                <Github className="h-4 w-4 mr-2" />
+                Report Issue
+              </a>
+            </Button>
+          </div>
+
+          <p className="text-sm text-muted-foreground mt-8">
+            Error ID: <code className="text-xs bg-muted px-2 py-1 rounded">{error.digest}</code>
+          </p>
+        </div>
+      </div>
     </div>
   );
-}
+}

app/projects/[project]/not-found.tsx

@@ -1,11 +1,60 @@
+"use client";
+import { Package, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useParams } from "next/navigation";
 import Link from "next/link";
 
-export default function NotFound() {
+export default function PackageNotFound() {
+  const params = useParams();
+  const packageName = params?.project as string;
+
   return (
-    <div>
-        <h2>Not Found</h2>
-        <p>Could not find requested resource</p>
-        <Link href="/">Return Home</Link>
+    <div className="min-h-[calc(100vh-140px)] flex flex-col items-center justify-center px-4">
+      <div className="text-center max-w-2xl mx-auto">
+        <div className="relative mb-8">
+          <Package className="h-24 w-24 text-muted-foreground/20 mx-auto" />
+          <Search
+            className="h-12 w-12 text-blue-600 absolute bottom-0 right-1/2 translate-x-8 translate-y-2 transform" />
+        </div>
+
+        <h1
+          className="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
+          Package Not Found
+        </h1>
+
+        <p className="text-xl text-muted-foreground mb-4">
+          We couldn&apos;t find the Python package <code
+          className="px-2 py-1 bg-muted rounded font-mono">{packageName}</code>
+        </p>
+        <p className="text-lg text-muted-foreground mb-8">
+          It might not exist on PyPI, or there could be a typo in the name.
+        </p>
+
+        <div className="space-y-4">
+          <div className="p-4 bg-muted/50 rounded-lg text-sm text-muted-foreground">
+            <p className="font-medium mb-2">Common reasons for this error:</p>
+            <ul className="list-disc list-inside space-y-1">
+              <li>The package name is misspelled</li>
+              <li>The package is new and we don&apos;t have data</li>
+              <li>The package name uses different characters (e.g., underscore vs hyphen)</li>
+            </ul>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Button asChild>
+              <Link href="/" className="flex items-center">
+                <Search className="h-4 w-4 mr-2" />
+                Search for packages
+              </Link>
+            </Button>
+            <Button variant="outline" asChild>
+              <Link href="https://pypi.org" target="_blank" rel="noopener noreferrer">
+                Visit PyPI
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
     </div>
   );
-}
+}