DitaViewer component that fetches and renders DITA XML. Example approach: // DitaViewer.tsx import { createResource, For } from "solid-js"; const fetchDita = async (topicPath: string) => { const res = await fetch(topicPath); const xmlText = await res.text(); const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlText, "application/xml"); return xmlDoc; };

// Simple DITA-to-HTML converter (expand as needed) function convertDitaToHtml(xmlDoc: Document): string { const body = xmlDoc.querySelector("body"); if (!body) return "No DITA body found."; // Serialize with basic transformation (or use a library like dita-ot-js) return body.innerHTML; }

return ( <div class="dita-content"> {data.loading && <p>Loading DITA content...</p>} {data.error && <p>Error loading DITA</p>} {data() && <div innerHTML={convertDitaToHtml(data())} />} </div> ); };

export const DitaViewer = (props: { src: string }) => { const [data] = createResource(() => props.src, fetchDita);

It looks like you're asking about using (likely SolidJS or a Solid-based framework) to create a feature named "PC Book" (maybe a PC booking system or a PC catalog), with the content or data sourced from DITA (the XML authoring standard for technical documentation).

export const PcBookFeature = () => { const [bookings] = createResource(fetchBookingData); const [selectedSlot, setSelectedSlot] = createStore({});