//Importações padrão do React
import React from 'react';
import ReactDOM from 'react-dom/client';

// Importação dos componentes do React-Fenestra
import { Desktop, Icon } from 'react-fenestra';

//Aplicação da folha de estilo do Bootstrap e do Fenestra (necessário).
import "bootstrap/dist/css/bootstrap.css";
import "react-fenestra/css/fenestra.css";

//Importação de bibliotecas do FontAwesome (opcional).
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';

//Renderização do nó raiz da aplicação
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>    
    <Desktop
      icons={[
        ({ fenestra }) =>
          <Icon title="Abrir Janela"
            icon={<FontAwesomeIcon icon={faWindowRestore} size="3x" />}
            onClick={() => fenestra.open({
              title: "Nova Janela",
              content: ({ fenestra }) =>
                <h1>Olá Mundo!</h1>
            })}
          />
      ]}
    />
  </React.StrictMode>
);

import React from 'react';
class MeuIcone extends React.Component {
    render(){
        return <button onClick={() => this.props.fenestra.open({title: "Nova Janela"})}>Abrir Janela</button>
    }
}
export default MeuIcone;

const MeuIcone = ({fenestra}) => 
<button onClick={() => fenestra.open({title: "Nova Janela"})}>Abrir Janela</button>;

export default MeuIcone;