function MainComponent({ pdfUrl, annotations, onAddAnnotation, onExtractPageNumbers, onCalculateResults }) { const [selectedText, setSelectedText] = React.useState(''); const [selectedZone, setSelectedZone] = React.useState(null); const handleAddAnnotation = ()=>{ const annotation = document.querySelector('input[name="annotation"]').value; onAddAnnotation(annotation, selectedText, selectedZone); setSelectedText(''); setSelectedZone(null); }; const handlePdfClick = (e)=>{ const x = e.clientX; const y = e.clientY; // Assuming zone is defined by upper left corner and size w-[100px] h-[50px] setSelectedZone({ x: x, y: y }); // Simulate OCR processing and getting text const extractedText = "Sample OCR Text"; setSelectedText(extractedText); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", onClick: handlePdfClick, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("embed", { src: pdfUrl, type: "application/pdf", width: "600", height: "800", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), selectedZone && /*#__PURE__*/ React.createElement("div", { className: "absolute border-2 border-red-500", style: { left: selectedZone.x, top: selectedZone.y, width: '100px', height: '50px' }, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-white text-xs", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, selectedText))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between w-full", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "annotation", placeholder: "Add annotation", className: "border p-2 w-full mr-2 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddAnnotation, className: "bg-blue-500 text-white px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("button", { onClick: onExtractPageNumbers, className: "mt-4 bg-green-500 text-white px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Extract Number"), /*#__PURE__*/ React.createElement("button", { onClick: onCalculateResults, className: "mt-4 bg-red-500 text-white px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Calculate Results")); } function StoryComponent() { const annotations = []; const handleAddAnnotation = (annotation, text, zone)=>{ annotations.push({ annotation, text, zone }); console.log('Annotation added:', annotation, text, zone); }; const handleExtractPageNumbers = ()=>{ alert('Extracting page numbers'); }; const handleCalculateResults = ()=>{ alert('Calculating results'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { pdfUrl: "/path/to/sample.pdf", annotations: annotations, onAddAnnotation: handleAddAnnotation, onExtractPageNumbers: handleExtractPageNumbers, onCalculateResults: handleCalculateResults, __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this })); }