79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import type { DocBlock } from '@/lib/docs-pages';
|
|
import { OAuthCodeTabs } from '@/components/oauth-code-tabs';
|
|
import { AuthLoginCodeTabs } from '@/components/auth-code-tabs';
|
|
import { AuthLdapCodeTabs } from '@/components/auth-ldap-code-tabs';
|
|
import { ApiReferenceSection } from '@/components/api-endpoint-card';
|
|
import { CodeBlock } from '@/components/code-block';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
function Callout({ variant, title, text }: { variant: 'info' | 'warning' | 'tip'; title: string; text: string }) {
|
|
const styles = {
|
|
info: 'border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/40',
|
|
warning: 'border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/40',
|
|
tip: 'border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/40'
|
|
};
|
|
|
|
return (
|
|
<div className={cn('my-4 rounded-xl border p-4', styles[variant])}>
|
|
<p className="font-semibold">{title}</p>
|
|
<p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">{text}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DocBlockRenderer({ block }: { block: DocBlock }) {
|
|
switch (block.type) {
|
|
case 'paragraph':
|
|
return <p className="leading-7 text-zinc-600 dark:text-zinc-300">{block.text}</p>;
|
|
case 'list':
|
|
return (
|
|
<ul className="my-4 list-disc space-y-2 pl-6 leading-7 text-zinc-600 dark:text-zinc-300">
|
|
{block.items.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
case 'code':
|
|
return <CodeBlock code={block.code} language={block.language} title={block.title} />;
|
|
case 'callout':
|
|
return <Callout variant={block.variant} title={block.title} text={block.text} />;
|
|
case 'table':
|
|
return (
|
|
<div className="my-4 overflow-x-auto rounded-xl border border-zinc-200 dark:border-zinc-800">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
|
|
{block.headers.map((header) => (
|
|
<th key={header} className="px-4 py-3 text-left font-semibold">
|
|
{header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{block.rows.map((row, index) => (
|
|
<tr key={index} className="border-b border-zinc-100 last:border-0 dark:border-zinc-800">
|
|
{row.map((cell, cellIndex) => (
|
|
<td key={cellIndex} className="px-4 py-3 align-top text-zinc-600 dark:text-zinc-300">
|
|
{cell}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
case 'oauth-examples':
|
|
return <OAuthCodeTabs />;
|
|
case 'auth-login-examples':
|
|
return <AuthLoginCodeTabs />;
|
|
case 'auth-ldap-examples':
|
|
return <AuthLdapCodeTabs />;
|
|
case 'api-reference':
|
|
return <ApiReferenceSection />;
|
|
default:
|
|
return null;
|
|
}
|
|
}
|