\n \n \n \n\n`;\n\n/**\n * Chip component for file tabs\n */\nconst Chip = ({ children, active, onClick, onRemove }) => {\n return (\n \n );\n};\n\n/**\n * Main App component that handles file viewing and management\n */\nfunction App() {\n const [files, setFiles] = useState([]);\n const [activeTab, setActiveTab] = useState(\"all\");\n const textAreaRef = useRef(null);\n\n /**\n * Recursively processes files and folders\n * @param {FileSystemEntry} entry - The file system entry\n * @param {string} path - The current path of the entry\n * @returns {Promise<{name: string, content: string} | null>}\n */\n const processEntry = async (entry, path = \"\") => {\n if (entry.isFile) {\n return new Promise((resolve) => {\n entry.file(async (file) => {\n const content = await file.text();\n resolve({ name: `${path}${file.name}`, content });\n });\n });\n } else if (entry.isDirectory) {\n const dirReader = entry.createReader();\n return new Promise((resolve) => {\n dirReader.readEntries(async (entries) => {\n const filePromises = entries.map(subEntry => processEntry(subEntry, `${path}${entry.name}/`));\n const files = await Promise.all(filePromises);\n resolve(files.flat().filter(Boolean));\n });\n });\n }\n return null;\n };\n\n /**\n * Handles file drop event\n * @param {React.DragEvent} e - The drag event\n */\n const onDrop = useCallback(async (e) => {\n e.preventDefault();\n const items = e.dataTransfer.items;\n const filePromises = [];\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i].webkitGetAsEntry();\n if (item) {\n filePromises.push(processEntry(item));\n }\n }\n\n const newFiles = (await Promise.all(filePromises)).flat().filter(Boolean);\n const filteredFiles = newFiles.filter(file => {\n const extension = file.name.split(\".\").pop().toLowerCase();\n return ![\"db\", \"lock\"].includes(extension);\n });\n\n setFiles(prevFiles => [...prevFiles, ...filteredFiles]);\n }, []);\n\n /**\n * Prevents default behavior for drag events\n * @param {React.DragEvent} e - The drag event\n */\n const preventDefault = (e) => e.preventDefault();\n\n /**\n * Formats the content of all files\n * @returns {string} Formatted content of all files\n */\n const getFormattedContent = () => {\n return files.map(file => `${file.name}\\n\"\"\"\\n${file.content}\\n\"\"\"\\n`).join(\"\\n\");\n };\n\n /**\n * Copies all file contents to clipboard\n */\n const copyFiles = () => {\n const formattedContent = getFormattedContent();\n if (textAreaRef.current) {\n textAreaRef.current.value = formattedContent;\n textAreaRef.current.select();\n document.execCommand(\"copy\");\n }\n };\n\n /**\n * Removes a file from the list\n * @param {number} index - The index of the file to remove\n */\n const removeFile = (index) => {\n setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));\n if (activeTab === index) {\n setActiveTab(\"all\");\n } else if (activeTab > index) {\n setActiveTab(prevTab => prevTab - 1);\n }\n };\n\n /**\n * Highlights code syntax after component updates\n */\n useEffect(() => {\n Prism.highlightAll();\n }, [activeTab, files]);\n\n /**\n * Determines the language for syntax highlighting based on file extension\n * @param {string} filename - The name of the file\n * @returns {string} The language for syntax highlighting\n */\n const getLanguage = (filename) => {\n const extension = filename.split(\".\").pop().toLowerCase();\n switch (extension) {\n case \"js\":\n return \"javascript\";\n case \"jsx\":\n return \"jsx\";\n case \"ts\":\n return \"typescript\";\n case \"tsx\":\n return \"tsx\";\n case \"css\":\n return \"css\";\n case \"html\":\n return \"markup\";\n case \"py\":\n return \"python\";\n case \"lua\":\n return \"lua\";\n case \"go\":\n return \"go\";\n case \"swift\":\n return \"swift\";\n case \"sh\":\n case \"bash\":\n return \"bash\";\n case \"md\":\n case \"markdown\":\n return \"markdown\";\n case \"applescript\":\n case \"scpt\":\n return \"applescript\";\n case \"json\":\n return \"json\";\n case \"csv\":\n return \"csv\";\n default:\n return \"plaintext\";\n }\n };\n\n /**\n * Renders CSV content as a table\n * @param {string} content - The CSV content\n * @returns {JSX.Element} The rendered table\n */\n const renderCSV = (content) => {\n const rows = content.trim().split(\"\\n\").map(row => row.split(\",\"));\n const headers = rows[0];\n const data = rows.slice(1);\n\n return (\n \n \n \n {headers.map((header, index) => )}\n \n \n \n {data.map((row, rowIndex) => (\n \n {row.map((cell, cellIndex) => )}\n \n ))}\n \n

{header}
{cell}

\n );\n };\n\n /**\n * Renders the content of the active tab\n * @returns {JSX.Element} The rendered content\n */\n const renderContent = () => {\n if (activeTab === \"all\") {\n return (\n

\n          \n            {getFormattedContent()}\n          \n

\n );\n } else {\n const file = files[activeTab];\n const language = getLanguage(file.name);\n\n if (language === \"csv\") {\n return (\n <>\n

{file.name}

\n {renderCSV(file.content)}\n \n );\n } else {\n return (\n <>\n

{file.name}

\n              \n                {file.content}\n              \n

\n \n );\n }\n }\n };\n\n return (\n

File Viewer (Multiple Languages)

\n \n Drag and drop files or folders here\n

\n {files.length > 0 && (\n <>\n \n

\n          <div className=\"tabs\">\n            <Chip\n              active={activeTab === \"all\"}\n              onClick={() => setActiveTab(\"all\")}\n              onRemove={() => {}}\n            >\n              All Files\n            </Chip>\n            {files.map((file, index) => (\n              <Chip\n                key={index}\n                active={index === activeTab}\n                onClick={() => setActiveTab(index)}\n                onRemove={() => removeFile(index)}\n              >\n                {file.name}\n              </Chip>\n            ))}\n          </div>\n          <div className=\"file-content\">\n            {renderContent()}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n/**\n * Initializes the React app on the client side\n */\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\n/**\n * Handles server-side rendering and returns the initial HTML response\n * @param {Request} request - The incoming request object\n * @returns {Promise<Response>} The HTML response\n */\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(\n    htmlTemplate,\n    {\n      headers: {\n        \"content-type\": \"text/html\",\n      },\n    },\n  );\n}","deleted","label",[98],"permalink","https://www.val.town/x/arfan/FileViewer/code/main.tsx","extension","actionData","errors"]
</article></body></html>