import {useRef, useState} from "react"; import {connect} from "react-redux"; import {Redirect} from "react-router"; import {useEffect} from "react"; import Editor from "./editor"; import {actionSnippetAdd} from "../actions/actionSnippetAdd"; const Snippets = ({onSave}) => { const [files, setFiles] = useState([ {type: "html", text:`

⚠ achtung ⚠

`, name:'main.html'}, {type: "css", text:` @import url(https://fonts.googleapis.com/css?family=Open+Sans); body { background: #111; font-family: 'Open Sans', Impact; } #area { margin-bottom:70px; text-align: center; font-size: 6.5em; color: #fff; letter-spacing: -7px; font-weight: 700; text-transform: uppercase; animation: blur .75s ease-out infinite; text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff; } @keyframes blur { from { text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8; }`, name:'style.css'}, {type: "javascript",text:` greek.style.color='white' greek.style.background='green' greek.style.borderRadius='40px' bluek.style.color='white' bluek.style.background='blue' bluek.style.borderRadius='40px' greek.onclick = () => { document.getElementById('area').style.color = 'green' } bluek.onclick = () => { document.getElementById('area').style.color = 'blue' }`,name:'main.js'}, ]); const [name, setName] = useState(""); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [srcDoc, setSrcDoc] = useState(""); const html = files.filter((elem) => { return elem?.type === "html"; })[0]?.text; const css = files.filter((elem) => { return elem?.type === "css"; })[0]?.text; const js = files.filter((elem) => { return elem?.type === "javascript"; })[0]?.text; useEffect(() => { const timeout = setTimeout(() => { setSrcDoc(` ${html || ""} `); }, 250); return () => clearTimeout(timeout); }, [html, css, js]); return (