nikita
191 lines
5.3 KiB
TypeScript
191 lines
5.3 KiB
TypeScript
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 <div>Hello React!</div>;\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(<App />);',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
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:
|
|
'<!DOCTYPE html>\n<html>\n<head>\n <title>My Landing</title>\n <link rel="stylesheet" href="styles.css">\n</head>\n<body>\n <h1>Welcome!</h1>\n</body>\n</html>',
|
|
},
|
|
{
|
|
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 (
|
|
<div
|
|
style={{
|
|
height: "100vh",
|
|
position: "relative",
|
|
backgroundColor: "var(--bg-primary)",
|
|
}}
|
|
>
|
|
{/* Floating header */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "16px",
|
|
right: "16px",
|
|
zIndex: 10,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "16px",
|
|
}}
|
|
>
|
|
{/* Running scripts counter */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "8px",
|
|
padding: "6px 12px",
|
|
backgroundColor: "var(--card-bg)",
|
|
borderRadius: "4px",
|
|
border: "1px solid var(--border)",
|
|
}}
|
|
>
|
|
<FiPlay size={13} color="#61c454" />
|
|
<span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
|
|
{selectedPaths.size} script{selectedPaths.size !== 1 ? "s" : ""}{" "}
|
|
running
|
|
</span>
|
|
</div>
|
|
|
|
{/* Open in Editor button */}
|
|
<button
|
|
onClick={() => navigate("/ide")}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "8px",
|
|
padding: "6px 16px",
|
|
backgroundColor: "#0e639c",
|
|
border: "none",
|
|
borderRadius: "4px",
|
|
color: "#ffffff",
|
|
cursor: "pointer",
|
|
fontSize: "12px",
|
|
fontWeight: 500,
|
|
transition: "all 0.15s",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.backgroundColor = "#1177bb";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.backgroundColor = "#0e639c";
|
|
}}
|
|
>
|
|
<FiEdit3 size={14} />
|
|
Open Editor
|
|
</button>
|
|
</div>
|
|
|
|
{/* File Picker */}
|
|
<div style={{ height: "100%", overflow: "hidden" }}>
|
|
<FilePicker files={mockFiles} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|