Comparar texto

Encontre a diferença entre dois arquivos de texto

Editor live
Recolher inalteradas
Sem quebra de linha
Layout
Nível de detalhe
Realce de sintaxe

Untitled diff

Criado O diff nunca expira
9 remoções
54 linhas
5 adições
50 linhas
import React, { useState } from "react";
import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDOM from "react-dom";
import ClayButton from "@clayui/button";
import ClayButton from "@clayui/button";
import ClayModal, { useModal } from "@clayui/modal";
import ClayModal, { useModal } from "@clayui/modal";


import "@clayui/css/lib/css/atlas.css";
import "@clayui/css/lib/css/atlas.css";


function Modal({ onModalClose }) {
function Modal({ observer, onClose }) {
const { observer, onClose } = useModal({
onClose: onModalClose
});

return (
return (
<ClayModal observer={observer} size="md">
<ClayModal observer={observer} size="md">
<ClayModal.Header>
<ClayModal.Header>
<h1>Yay! I'm a modal</h1>
<h1>Yay! I'm a modal</h1>
</ClayModal.Header>
</ClayModal.Header>
<ClayModal.Body>
<ClayModal.Body>
<p>
<p>
Bacon ipsum dolor amet venison bresaola brisket ham turkey. Porchetta
Bacon ipsum dolor amet venison bresaola brisket ham turkey. Porchetta
pork loin bresaola, flank beef corned beef doner meatloaf venison
pork loin bresaola, flank beef corned beef doner meatloaf venison
pancetta.
pancetta.
</p>
</p>
</ClayModal.Body>
</ClayModal.Body>
<ClayModal.Footer
<ClayModal.Footer
last={
last={
<ClayButton.Group spaced>
<ClayButton.Group spaced>
<ClayButton displayType="secondary" onClick={onClose}>
<ClayButton displayType="secondary" onClick={onClose}>
Close me
Close me
</ClayButton>
</ClayButton>
</ClayButton.Group>
</ClayButton.Group>
}
}
/>
/>
</ClayModal>
</ClayModal>
);
);
}
}


function App() {
function App() {
const [showModal, setShowModal] = useState(true);
const [showModal, setShowModal] = useState(true);


const handleClose = () => {
const { observer, onClose } = useModal({
setShowModal(false);
onClose: () => setShowModal(false)
};
});


return (
return (
<div className="App">
<div className="App">
{showModal && <Modal onModalClose={handleClose} />}
{showModal && <Modal observer={observer} onClose={onClose} />}
</div>
</div>
);
);
}
}


const rootElement = document.getElementById("root");
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
ReactDOM.render(<App />, rootElement);


Diferenças salvas