feat(PageTabs): add PageTabs component for page navigation and integrate with ContentWrap

Author: MrCoder

src/components/ContentWrap.jsx

@@ -3,6 +3,7 @@ import { saveAs } from 'file-saver';
 import UserCodeMirror from './UserCodeMirror.jsx';
 import Toolbox from './Toolbox.jsx';
 import Tabs from './Tabs.jsx';
+import PageTabs from './PageTabs.jsx';
 import { computeCss, computeHtml, computeJs } from '../computes';
 import { CssModes, HtmlModes, JsModes, modes } from '../codeModes';
 import { getCompleteHtml, loadJS, log } from '../utils';
@@ -1083,6 +1084,13 @@ export default class ContentWrap extends Component {
         </div>
         <div class="demo-side" id="js-demo-side">
           <div className="h-full flex flex-col">
+            {this.props.currentItem && this.props.currentItem.pages && this.props.currentItem.pages.length > 0 && (
+              <PageTabs
+                pages={this.props.currentItem.pages}
+                currentPageId={this.props.currentItem.currentPageId}
+                onTabClick={this.props.onPageSwitch}
+              />
+            )}
             <div
               className="flex-grow"
               style="overflow-y: auto; -webkit-overflow-scrolling: touch; "

src/components/PageTabs.jsx

@@ -0,0 +1,35 @@
+import React from 'preact';
+
+/**
+ * PageTabs component displays tabs for each page and handles tab switching
+ *
+ * @param {Object} props - Component props
+ * @param {Array} props.pages - Array of page objects
+ * @param {String} props.currentPageId - ID of the currently active page
+ * @param {Function} props.onTabClick - Callback function when a tab is clicked
+ */
+export function PageTabs({ pages, currentPageId, onTabClick }) {
+  if (!pages || pages.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="page-tabs bg-black-500 border-b border-black-700 px-2 py-1 flex overflow-x-auto">
+      {pages.map(page => (
+        <button
+          key={page.id}
+          className={`px-4 py-2 mx-1 rounded-t-lg text-sm font-medium transition-colors duration-200 ${
+            page.id === currentPageId
+              ? 'bg-primary text-white'
+              : 'bg-black-600 text-gray-400 hover:bg-black-700 hover:text-gray-300'
+          }`}
+          onClick={() => onTabClick(page.id)}
+        >
+          {page.title || 'Untitled'}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default PageTabs;

src/components/app.jsx

@@ -1679,6 +1679,7 @@ BookLibService.Borrow(id) {
             onEditorFocus={this.editorFocusHandler.bind(this)}
             onSplitUpdate={this.splitUpdateHandler.bind(this)}
             onProFeature={this.proBtnClickHandler.bind(this)}
+            onPageSwitch={this.switchToPage.bind(this)}
             keyboardShortcutsBtnClickHandler={this.handleShortcutsModalOpen.bind(
               this,
             )}