${example.description.title}

import React from "react"; function RenderSources({ sources }) { return ( <> {sources.html &&

HTML

} {sources.html && (

          {sources.html_html && (
            
          )}
          {!sources.html_html && {sources.html}}


      )}

      {sources.css && CSS}
      {sources.css && (
                  {sources.css_html && (
            
          )}
          {!sources.css_html && {sources.css}}
        

      )}

      {sources.js && JavaScript}
      {sources.js && (
                  {sources.js_html && (
            
          )}
          {!sources.js_html && {sources.js}}
        

      )}
    
  );
}

function RenderLiveSample({ example }) {
  const srcdoc = `
  
      
      
      ${example.description.title}
  
  ${example.sources.html}
      
  
`;
  return (
    <>
      Result
      
    </>
  );
}

function Example({ example }) {
  return (
    <>
      {example.description.title && <h3>{example.description.title}</h3>}

      {example.description.content && (
        <div
          dangerouslySetInnerHTML={{ __html: example.description.content }}
        />
      )}

      <RenderSources sources={example.sources} />

      {/* At the moment the author implicitly signals that an example is live
        by including width and height values for the iframe */}
      {example.description.height && <RenderLiveSample example={example} />}
    </>
  );
}

export function Examples({ examples }) {
  return (
    <>
      {examples.title && (
        <h2 id={examples.id && examples.id}>{examples.title}</h2>
      )}
      {examples.examples.map((example, i) => (
        <Example key={i} example={example} />
      ))}
    </>
  );
}