first commit

apps/docs/components/api-endpoint-card.tsx

@@ -0,0 +1,45 @@
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { apiReference, type ApiEndpoint } from '@/lib/api-endpoints';
+import { cn } from '@/lib/utils';
+
+const methodColors: Record<ApiEndpoint['method'], string> = {
+  GET: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
+  POST: 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300',
+  PUT: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300',
+  PATCH: 'bg-violet-100 text-violet-800 dark:bg-violet-950 dark:text-violet-300',
+  DELETE: 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300'
+};
+
+export function ApiEndpointCard({ endpoint }: { endpoint: ApiEndpoint }) {
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="flex flex-col gap-2 p-4 sm:flex-row sm:items-start sm:gap-4">
+        <Badge className={cn('w-fit shrink-0 font-mono', methodColors[endpoint.method])}>{endpoint.method}</Badge>
+        <div className="min-w-0 flex-1">
+          <code className="break-all text-sm font-medium">{endpoint.path}</code>
+          <p className="mt-1 text-sm font-medium">{endpoint.summary}</p>
+          {endpoint.description ? <p className="mt-1 text-sm text-zinc-500">{endpoint.description}</p> : null}
+          {endpoint.auth ? <p className="mt-2 text-xs text-zinc-400">Требуется Authorization: Bearer JWT</p> : null}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ApiReferenceSection() {
+  return (
+    <div className="space-y-8">
+      {apiReference.map((group) => (
+        <div key={group.tag}>
+          <h3 className="mb-4 text-lg font-semibold">{group.tag}</h3>
+          <div className="space-y-3">
+            {group.endpoints.map((endpoint) => (
+              <ApiEndpointCard key={`${endpoint.method}-${endpoint.path}`} endpoint={endpoint} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}