123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- 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:`
- <div id='area'>⚠ achtung ⚠</div>
- <div>
- <button id='greek'>Change color</button>
- <button id='bluek'>Change color</button>
- </div>`, 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>
- <body>${html || ""}</body>
- <style>${css || ""}</style>
- <script>${js || ""}</script>
- </html>
- `);
- }, 250);
- return () => clearTimeout(timeout);
- }, [html, css, js]);
- return (
- <div>
- <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
- height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>
- {files.map((data, index) => (
- <>
- <Editor onDelete={() => setFiles(files.filter((item) => item !== data))} data={data}
- onChange={({type, name, text}) => setFiles([...files.slice(0, index),{type, name, text},...files.slice(index + 1),])}
- />
- </>
- ))}
- <br />
- <div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
- <div>
- <button className="btn btn-primary" style={{}} onClick={()=> setFiles([...files, { type: "html" }])} key={files} style={{marginTop: "10px"}}>
- Add editor
- </button>
- </div>
- <div className="input-group mb-3 mt-5 ml-auto mr-auto w-50">
- <div className="input-group-prepend">
- <span className="input-group-text" id="basic-addon1">
- Name of your project
- </span>
- </div>
- <input value={title} onChange={(e) => setTitle(e.target.value)} type="text" className="form-control"
- placeholder="Name of project" aria-label="Name of project" aria-describedby="basic-addon1"/>
- </div>
- <div className="input-group ml-auto mr-auto w-50">
- <div className="input-group-prepend">
- <span className="input-group-text ">Description</span>
- </div>
- <textarea value={description} onChange={(e) => setDescription(e.target.value)} className="form-control "
- aria-label="With textarea" placeholder="Your description"></textarea>
- </div>
- <button className="btn btn-success float-center mr-5 mb-5" onClick={() => onSave(title, description, files)} style={{marginTop: '30px'}}>
- Save project
- </button>
- </div>
- </div>
- );
- };
- const CSnippets = connect(null, {onSave: actionSnippetAdd})(Snippets);
- export default CSnippets;
|