132 lines
4.7 KiB
TypeScript
132 lines
4.7 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { FileCode } from "lucide-react";
|
|
|
|
export default async function ArchitecturePage({
|
|
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">Architecture</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Living architecture documentation and ADRs
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-auto p-6">
|
|
<div className="mx-auto max-w-6xl">
|
|
<Tabs defaultValue="overview" className="space-y-4">
|
|
<TabsList>
|
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
<TabsTrigger value="decisions">Decisions (ADRs)</TabsTrigger>
|
|
<TabsTrigger value="tech-stack">Tech Stack</TabsTrigger>
|
|
<TabsTrigger value="data-model">Data Model</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="overview" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Architecture Overview</CardTitle>
|
|
<CardDescription>
|
|
High-level system architecture
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="prose max-w-none">
|
|
<p className="text-muted-foreground">
|
|
Architecture documentation will be automatically generated
|
|
from your code and conversations.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="decisions" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Architectural Decision Records</CardTitle>
|
|
<CardDescription>
|
|
Key architectural choices and their context
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col items-center justify-center py-12">
|
|
<div className="mb-4 rounded-full bg-muted p-3">
|
|
<FileCode className="h-6 w-6 text-muted-foreground" />
|
|
</div>
|
|
<p className="text-sm text-center text-muted-foreground max-w-sm">
|
|
ADRs will be automatically detected from your AI conversations
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="tech-stack" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Technology Stack</CardTitle>
|
|
<CardDescription>
|
|
Approved technologies and frameworks
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div>
|
|
<h4 className="font-medium mb-2">Frontend</h4>
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
<li>• Next.js 15</li>
|
|
<li>• React 19</li>
|
|
<li>• Tailwind CSS</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium mb-2">Backend</h4>
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
<li>• Node.js</li>
|
|
<li>• Express</li>
|
|
<li>• PostgreSQL</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="data-model" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Data Model</CardTitle>
|
|
<CardDescription>
|
|
Database schema and relationships
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">
|
|
Database schema documentation coming soon
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|