import { useNavigate } from "react-router-dom"; import { FiEdit3, FiPlay } from "react-icons/fi"; import { FilePicker, useFilePickerStore } from "../modules/ide"; import type { FileNode } from "../modules/ide"; const mockFiles: FileNode = { name: "templates", type: "folder", children: [ { name: "python-basic", type: "folder", children: [ { name: "src", type: "folder", children: [ { name: "main.py", type: "file", content: 'print("Hello, World!")\n\ndef main():\n print("Welcome!")\n\nif __name__ == "__main__":\n main()', }, { name: "utils.py", type: "file", content: "def helper():\n return 42", }, ], }, { name: "README.md", type: "file", content: "# Python Project\n\nA basic Python project.", }, ], }, { name: "react-starter", type: "folder", children: [ { name: "src", type: "folder", children: [ { name: "App.tsx", type: "file", content: 'import React from "react";\n\nexport const App: React.FC = () => {\n return
Hello React!
;\n};', }, { name: "index.tsx", type: "file", content: 'import React from "react";\nimport { createRoot } from "react-dom/client";\nimport { App } from "./App";\n\ncreateRoot(document.getElementById("root")!).render();', }, ], }, { name: "package.json", type: "file", content: '{\n "name": "react-project",\n "version": "1.0.0"\n}', }, ], }, { name: "node-api", type: "folder", children: [ { name: "src", type: "folder", children: [ { name: "index.js", type: "file", content: 'const express = require("express");\nconst app = express();\nconst PORT = 3000;\n\napp.get("/", (req, res) => {\n res.json({ message: "Hello!" });\n});\n\napp.listen(PORT, () => {\n console.log(`Server running on port ${PORT}`);\n});', }, ], }, { name: "package.json", type: "file", content: '{\n "name": "api-project",\n "dependencies": {\n "express": "^4.18.0"\n }\n}', }, ], }, { name: "html-css", type: "folder", children: [ { name: "index.html", type: "file", content: '\n\n\n My Landing\n \n\n\n

Welcome!

\n\n', }, { name: "styles.css", type: "file", content: "body {\n font-family: sans-serif;\n margin: 0;\n padding: 2rem;\n background: #f5f5f5;\n}\n\nh1 {\n color: #333;\n}", }, ], }, ], }; export const TemplatesPage = () => { const navigate = useNavigate(); const selectedPaths = useFilePickerStore((s) => s.selectedPaths); return (
{/* Floating header */}
{/* Running scripts counter */}
{selectedPaths.size} script{selectedPaths.size !== 1 ? "s" : ""}{" "} running
{/* Open in Editor button */}
{/* File Picker */}
); };