Agregar funcionalidad de preview para lenguajes html, css y vanillajs

[ ] El boton de "run" debe decir para estos lenguajes "preview" en lugar de run.
[ ] Si unicamente consigues codigo CSS entonces no muestres el boton de preview

Puedes inspirarte en este codigo:

import React, { useState } from "react";

const CodePreview = () => {
  // State to store user inputs
  const [html, setHtml] = useState("");
  const [css, setCss] = useState("");
  const [js, setJs] = useState("");

  // Create the complete HTML document
  const generatePreview = () => {
    return `
      <html>
        <head>
          <style>${css}</style>
        </head>
        <body>
          ${html}
          <script>${js}</script>
        </body>
      </html>
    `;
  };

  // Check whether the preview should be displayed
  const shouldShowPreview = html.trim() !== "" || js.trim() !== "";

  return (
    <div>
      {/* Input areas */}
      <div>
        <h2>HTML</h2>
        <textarea
          value={html}
          onChange={(e) => setHtml(e.target.value)}
          rows="5"
          cols="50"
          placeholder="Write HTML here"
        />
      </div>
      <div>
        <h2>CSS</h2>
        <textarea
          value={css}
          onChange={(e) => setCss(e.target.value)}
          rows="5"
          cols="50"
          placeholder="Write CSS here"
        />
      </div>
      <div>
        <h2>JavaScript</h2>
        <textarea
          value={js}
          onChange={(e) => setJs(e.target.value)}
          rows="5"
          cols="50"
          placeholder="Write JavaScript here"
        />
      </div>

      {/* Conditionally render the preview */}
      {shouldShowPreview ? (
        <>
          <h2>Preview</h2>
          <iframe
            title="Live Preview"
            srcDoc={generatePreview()} // Dynamically inject content
            sandbox="allow-scripts"
            style={{ width: "100%", height: "300px", border: "1px solid black" }}
          />
        </>
      ) : (
        <p>Provide HTML or JavaScript to see the preview.</p>
      )}
    </div>
  );
};

export default CodePreview;

breatheco-de / breatheco-de

Agregar funcionalidad de preview para lenguajes html, css y vanillajs #7985