75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Map } from "lucide-react";
|
|
|
|
export default async function ApiMapPage({
|
|
params,
|
|
}: {
|
|
params: { projectId: string };
|
|
}) {
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
{/* Page Header */}
|
|
<div className="border-b bg-card/50 px-6 py-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">API Map</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Auto-generated API endpoint documentation
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-auto p-6">
|
|
<div className="mx-auto max-w-6xl">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>API Endpoints</CardTitle>
|
|
<CardDescription>
|
|
Automatically detected from your codebase
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{/* Example endpoints */}
|
|
{[
|
|
{ method: "GET", path: "/api/sessions", desc: "List all sessions" },
|
|
{ method: "POST", path: "/api/sessions", desc: "Create new session" },
|
|
{ method: "GET", path: "/api/features", desc: "List features" },
|
|
].map((endpoint, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center justify-between rounded-lg border p-4"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<Badge
|
|
variant={endpoint.method === "GET" ? "outline" : "default"}
|
|
className="font-mono"
|
|
>
|
|
{endpoint.method}
|
|
</Badge>
|
|
<div>
|
|
<code className="text-sm font-mono">{endpoint.path}</code>
|
|
<p className="text-sm text-muted-foreground">
|
|
{endpoint.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|