feat: page tempaltes
This commit is contained in:
nikita
@@ -1,14 +1,15 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { IDE } from "../modules/ide";
|
||||
import type { FileNode } from "../modules/ide";
|
||||
|
||||
export const IDEPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const files: FileNode | undefined = location.state?.files;
|
||||
|
||||
return (
|
||||
<div className="absolute top-0 left-0 w-full h-full z-90">
|
||||
<IDE
|
||||
onBack={() => navigate("/home")}
|
||||
initialFiles={{ name: "тест", type: "folder" }}
|
||||
/>
|
||||
<IDE onBack={() => navigate("/templates")} initialFiles={files} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
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",
|
||||
}}
|
||||
>
|
||||
{/* 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: "#1a1a1a",
|
||||
borderRadius: "4px",
|
||||
border: "1px solid #2a2a2a",
|
||||
}}
|
||||
>
|
||||
<FiPlay size={13} color="#61c454" />
|
||||
<span style={{ fontSize: "12px", color: "#858585" }}>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user