import { useState, useEffect } from "react";
import { SelectTheme } from "helpers/SelectTheme";
import { SelectFontSize } from "helpers/SelectFontSize";
import "./EditorsPage.css";
import { Editor } from "./Editor";
const datas = [
{
type: "html",
name: "",
text: `
Welcome to the Codepen
`,
},
{
type: "css",
name: "",
text: `.blue {
color: blue;
font-size: 27px;
margin-bottom: 10px;
font-family: Sans-Serif;
}
.red {
color: red;
}`,
},
{
type: "javascript",
name: "",
text: `const btn = document.createElement('button');
btn.innerHTML = 'Change color';
btn.style.color = 'black';
btn.style.fontSize = '18px';
document.body.append(btn);
btn.style.cursor = 'pointer';
btn.onclick = () => {
document.getElementById('codepen').classList.toggle("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(() => {
const source = { html: "", css: "", javascript: "" };
editors.forEach(({ type, text }) => (source[type] = text));
setSrcDoc(`
${source.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: