import style from '../styles/lists.module.css'; import React, { ReactElement } from 'react'; interface listItem { children?: listItem[] | string[]; url?: string; title: string; description?: string; }; export function toListItem(record: Record): listItem | null { if (!record.title) return null; let children: listItem[] | string[] = []; if (Array.isArray(record.children) && record.children.length) { let lchildren: listItem[] = []; let schildren: string[] = []; for (const child of record.children) { if (typeof child === 'string') { schildren.push(child); continue; } const lChild = toListItem(child); if (lChild) lchildren.push(lChild); } if (!lchildren.length) { children = schildren; } else { children = [...lchildren, ...schildren.map((s: string): listItem => { return { title: s }; })]; } } return { title: record.title, url: record.url, children: children.length ? children : undefined, description: record.description, }; } export function mapChild(obj: listItem | string, level: number) { if (typeof obj === 'string') { if (obj === '') return <> return {obj} } if (obj.title === '') return <> if (obj.url) return {obj.title} if (!obj.children) return {obj.title} let title: ReactElement; if (level >= 0 && level <= 4) title = React.createElement(`h${level + 2}`, {}, obj.title); else title = React.createElement('strong', {}, obj.title); return (
{title} {obj.description ?

{obj.description}

: <>}
{obj.children.map(l => mapChild(l, level + 1))}
); }