adding pdf view

Author: ezequielramos

.nvmrc

@@ -0,0 +1 @@
+v22.12.0

src/App.tsx

@@ -6,6 +6,7 @@ import { FileTree } from './components/file-tree';
 import Sidebar from './components/sidebar';
 import HeaderBar from './components/header-bar';
 import { PDFTeX } from './pdftex/pdftex';
+import Tabs from './components/tabs';
 
 const dummyDir: Directory = {
   id: "1",
@@ -17,10 +18,29 @@ const dummyDir: Directory = {
   files: []
 };
 
+function PDFViewer({ dataUrl }: { dataUrl?: string; }) {
+  return (
+    <>
+      {dataUrl &&
+        <iframe
+          src={dataUrl}
+          style={{
+            width: "100%",
+            height: "100%",
+            border: "none",
+          }}
+          title="PDF preview"
+        />
+      }
+    </>
+  );
+}
+
 function App() {
   const [selectedFile, setSelectedFile] = useState<File | undefined>(undefined);
   const [rootDir, setRootDir] = useState(dummyDir);
-
+  const [pdfDataUrl, setPdfDataUrl] = useState<string>();
+  const [selectedTab, setSelectedTab] = useState<string>();
 
   async function readDirectory({ dirHandle, depth = 0, initialPath = '/', name, parentId }: {
     dirHandle: FileSystemDirectoryHandle,
@@ -106,7 +126,9 @@ function App() {
     const uint8pdf = binaryStringToUint8Array(binary_pdf);
     const blob = new Blob([uint8pdf], { type: "application/pdf" });
     const url = URL.createObjectURL(blob);
-    window.open(url, "_blank");
+
+    setPdfDataUrl(url);
+    setSelectedTab('pdf');
 
   }
 
@@ -157,9 +179,36 @@ function App() {
           onSelect={setSelectedFile}
         />
       </Sidebar>
-      <Code
-        selectedFile={selectedFile}
-      />
+      <div style={{
+        display: 'flex',
+        flex: 1,
+        height: window.innerHeight - 25
+      }}>
+        <Tabs
+          tabs={[{
+            key: 'code',
+            label: selectedFile?.name || 'code',
+          }, {
+            key: 'pdf',
+            label: 'pdf'
+          }]}
+          selectedTab={selectedTab}
+          setSelectedTab={setSelectedTab}
+        >
+          {({ selectedTab }) => {
+            if (selectedTab === 'code') {
+              return <Code
+                selectedFile={selectedFile}
+              />;
+            }
+            if (selectedTab === 'pdf') {
+              return <PDFViewer
+                dataUrl={pdfDataUrl}
+              />;
+            }
+          }}
+        </Tabs>
+      </div>
     </div>
   </div>
   );

src/components/sidebar.tsx

@@ -5,7 +5,6 @@ export const Sidebar = ({ children }: { children: ReactNode; }) => {
         <aside style={{
             display: 'block',
             width: 250,
-            // height: '100vh',
             borderRightStyle: 'solid',
             borderRightWidth: 2,
             borderColor: '#242424',

src/components/tabs.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState, type CSSProperties } from "react";
+
+interface TabInfo {
+    key: string;
+    label: string;
+}
+
+function Button(params: { item: TabInfo; setSelectedTab: (value: string) => void; selectedTab: string; }) {
+    const buttonStyle: CSSProperties = {
+        color: '#ffffff',
+        borderWidth: 0,
+        cursor: 'pointer',
+        minWidth: 120,
+    };
+
+    const [isHovered, setHovered] = useState(false);
+
+    return <button
+        style={{
+            ...buttonStyle,
+            backgroundColor: isHovered || params.item.key === params.selectedTab ? '#222222' : '#343434',
+        }}
+        onClick={() => params.setSelectedTab(params.item.key)}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+    >
+        {params.item.label}
+    </button>;
+}
+
+export default function Tabs(params: {
+    tabs: TabInfo[];
+    children: ({ selectedTab }: { selectedTab: string; }) => React.ReactNode | undefined;
+    selectedTab?: string;
+    setSelectedTab?: (value: string) => void;
+}) {
+    const [selectedTab, setSelectedTab] = useState(params.tabs[0].key);
+
+    useEffect(() => {
+        if (params.selectedTab && params.selectedTab !== selectedTab) {
+            setSelectedTab(params.selectedTab);
+        }
+    }, [params.selectedTab]);
+
+
+    useEffect(() => {
+        if (params.setSelectedTab) {
+            params.setSelectedTab(selectedTab);
+        }
+    }, [selectedTab]);
+
+    return <div style={{
+        width: '100%',
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+    }}>
+        <div style={{
+            width: '100%',
+            height: 30,
+            display: 'flex',
+            borderColor: '#242424',
+            flexDirection: 'row',
+            gap: 2,
+        }}>
+            {params.tabs.map((tab) => {
+                return <Button key={tab.label} item={tab} setSelectedTab={setSelectedTab} selectedTab={selectedTab} />;
+            })}
+        </div>
+        {params.children({ selectedTab })}
+
+    </div>;
+}

src/editor/code.tsx

@@ -77,8 +77,7 @@ export default function Code({ selectedFile }: { selectedFile: File | undefined;
 
     return (
         <div style={{
-            width: 'calc(100% - 250px)',
-            height: window.innerHeight - 25,
+            flex: 1,
             margin: 0,
             fontSize: 16,
         }}>