65 lines
3.1 KiB
TypeScript
65 lines
3.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import { CodeBlock } from './CodeBlock';
|
|
import { ApiDocEntry, ApiSection } from '../types';
|
|
|
|
interface ContentPageProps {
|
|
title: string;
|
|
introduction?: string | React.ReactNode;
|
|
sections?: ApiSection[];
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const ContentPage: React.FC<ContentPageProps> = ({ title, introduction, sections, children }) => {
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 mb-6 pb-2 border-b-2 border-gray-700">{title}</h1>
|
|
{introduction && (
|
|
<div className="prose prose-invert prose-lg max-w-none mb-8 text-gray-300">
|
|
{typeof introduction === 'string' ? <p>{introduction}</p> : introduction}
|
|
</div>
|
|
)}
|
|
{children}
|
|
{/* Render children (like InfoPanel) before sections if they are direct children of ContentPage */}
|
|
{sections && sections.map((section, idx) => (
|
|
<section key={idx} className="mb-12">
|
|
<h2 className="text-3xl font-semibold text-purple-300 mb-4">{section.title}</h2>
|
|
{section.description && <p className="text-gray-400 mb-6 text-lg">{section.description}</p>}
|
|
{section.entries.map((entry, entryIdx) => (
|
|
<div key={entryIdx} className="mb-10 p-6 bg-gray-800 rounded-xl shadow-lg">
|
|
<h3 className="text-xl font-mono font-semibold text-green-400 mb-2 bg-gray-700 p-2 rounded-md inline-block">{entry.signature}</h3>
|
|
<div className="text-gray-300 mb-3 prose prose-invert max-w-none">{typeof entry.description === 'string' ? <p>{entry.description}</p> : entry.description}</div>
|
|
{entry.parameters && entry.parameters.length > 0 && (
|
|
<div className="mb-3">
|
|
<h4 className="text-md font-semibold text-pink-400 mb-1">Parameters:</h4>
|
|
<ul className="list-disc list-inside space-y-1 pl-4 text-gray-400">
|
|
{entry.parameters.map((param, pIdx) => (
|
|
<li key={pIdx}>
|
|
<code className="text-sm bg-gray-700 px-1 rounded">{param.name}</code>: <code className="text-sm text-cyan-400">{param.type}</code> - {param.description}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
{entry.returns && (
|
|
<div className="mb-3">
|
|
<h4 className="text-md font-semibold text-pink-400 mb-1">Returns:</h4>
|
|
<p className="text-gray-400">
|
|
<code className="text-sm text-cyan-400">{entry.returns.type}</code> - {entry.returns.description}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{entry.example && (
|
|
<div className="mb-3">
|
|
<h4 className="text-md font-semibold text-pink-400 mb-1">Example:</h4>
|
|
<CodeBlock code={entry.example} language="lua" />
|
|
</div>
|
|
)}
|
|
{/* Old notes rendering removed, as InfoPanel is now used directly within page content */}
|
|
</div>
|
|
))}
|
|
</section>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|