DocPage.jsx

Go to the documentation of this file.

import { useParams } from 'react-router-dom';
import DocsLayout from './DocsLayout';
import { guides } from './guides/index';
import { docGroups } from './docsData';
 
function SectionRenderer({ section }) {
  if (section.steps) {
    return (
      <ol className="step-list">
        {section.steps.map((s, idx) => (
          <li key={idx}>
            <strong>{s.title}</strong>
            <p>{s.text}</p>
          </li>
        ))}
      </ol>
    );
  }
  if (section.list) {
    return (
      <ul>
        {section.list.map((li, idx) => (
          <li key={idx}>{li}</li>
        ))}
      </ul>
    );
  }
  if (section.links) {
    return (
      <ul className="doc-links">
        {section.links.map((link, idx) => (
          <li key={idx}>
            <a href={link.url}>{link.title}</a>
          </li>
        ))}
      </ul>
    );
  }
}
 
export default function DocPage() {
  const { slug } = useParams();
  let doc = guides.find((g) => g.slug === slug);
  if (!doc) {
    // Search docGroups for the slug if not found in guides
    for (const group of docGroups) {
      const found = group.items.find((i) => i.slug === slug);
      if (found) {
        doc = found;
        break;
      }
    }
  }
 
  if (!doc) {
    return (
      <DocsLayout>
        <section className="doc-section">
          <h1>Not found</h1>
          <p>The requested documentation page does not exist.</p>
        </section>
      </DocsLayout>
    );
  }
 
  return (
    <DocsLayout>
      <section className="doc-section">
        <h1>
          <span className="material-symbols-outlined" style={{ verticalAlign: '-6px', marginRight: 8 }}>{doc.icon}</span>
          {doc.title}
        </h1>
        {doc.summary && <p className="lead">{doc.summary}</p>}
        {doc.image && (
          <div className="doc-image-placeholder">
            <img src={doc.image} alt={`${doc.title} preview`} onError={(e) => e.target.style.display = 'none'} />
          </div>
        )}
      </section>
 
      {doc.sections?.map((s, i) => (
        <section className="doc-section" key={i}>
          {s.heading && <h2>{s.heading}</h2>}
          <SectionRenderer section={s} />
        </section>
      ))}
    </DocsLayout>
  );
}