import { useState, useEffect } from "react";
import { Editor } from "../components/Editor";
import { SelectTheme } from "../helpers/SelectTheme";
import { SelectFontSize } from "../helpers/SelectFontSize";
import "./EditorsPage.css";
const datas = [
{
type: "html",
name: "",
text: `
Welcome to the Codepen
`,
},
{
type: "css",
name: "",
text: `#codepen {
color: blue;
font-size: 25px;
font-family: Times New Roman;
}`,
},
{
type: "javascript",
name: "",
text: `let btn = document.createElement('button');
btn.innerHTML = 'Change color';
btn.style.color = 'red';
btn.style.fontSize = '20px';
document.body.append(btn);
btn.style.cursor = 'pointer';
btn.onclick = () => {
document.getElementById('codepen').style.color = 'red'};`,
},
];
export const EditorsPage = ({ onSave }) => {
const [editors, setEditors] = useState(datas);
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [srcDoc, setSrcDoc] = useState("");
const [theme, setTheme] = useState();
const [font, setFont] = useState();
useEffect(() => {
const timeout = setTimeout(() => {
let html, css, javascript;
editors.forEach(e => {
if (e.type === "html") html = e.text;
if (e.type === "css") css = e.text;
if (e.type === "javascript") javascript = e.text;
});
setSrcDoc(`
${html}
`);
}, 250);
return () => clearTimeout(timeout);
}, [editors]);
return (
<>
{"Theme: "}
{"FontSize: "}
{editors.map((data, index) => {
return (
{
let editor = [...editors];
editor.splice(index, 1, newData);
setEditors(editor);
}}
/>
);
})}
Name of your project:
setTitle(e.target.value)}
/>
Description: