46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
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>
|
||
);
|
||
}
|