import { Head } from '@inertiajs/react';
import {
BookOpen,
ChevronDown,
Download,
ListTree,
Search,
} from 'lucide-react';
import { useMemo, useState } from 'react';
import { PageHeader } from '@/components/crm/page-header';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
type Chapter = {
id: string;
title: string;
};
type Part = {
/** null for chapters that sit before the first part. */
title: string | null;
chapters: Chapter[];
};
type Props = {
html: string;
contents: Part[];
summary: {
chapters: number;
screenshots: number;
updated: string | null;
};
pdfUrl: string;
};
/**
* The chapter list, drawn either in the column beside the manual or inside the
* disclosure that stands in for it on a narrow screen.
*/
function ChapterList({ parts, filter }: { parts: Part[]; filter: string }) {
return (
);
}
/**
* The user manual, in the application.
*
* The words are Markdown in the repository, converted on the server; this page
* is the reading frame around them โ a chapter list for when somebody knows
* what they are looking for, and the PDF for somebody who wants it on paper or
* on a phone with no signal.
*
* The card is given the full width of the settings area, because a screenshot
* of a CRM screen is worthless at half size. The prose is not: `.manual-prose`
* in app.css caps the words at a readable measure while letting the pictures,
* tables and command examples use all of the room.
*
* The article is rendered as markup because it is generated from a file in
* this repository, never from anything a user typed. That is the difference
* between this and a ticket description, which has to be sanitised first.
*/
export default function Manual({ html, contents, summary, pdfUrl }: Props) {
const [filter, setFilter] = useState('');
const parts = useMemo(() => {
const term = filter.trim().toLowerCase();
if (term === '') {
return contents;
}
return contents
.map((part) => ({
...part,
chapters: part.chapters.filter((chapter) =>
chapter.title.toLowerCase().includes(term),
),
}))
.filter((part) => part.chapters.length > 0);
}, [contents, filter]);
const searchInput = (
setFilter(event.target.value)}
placeholder="Find a chapter"
aria-label="Find a chapter"
className="h-9 pl-8"
/>