Comparar texto

Encuentra la diferencia entre dos archivos de texto

Editor live
Ocultar sin cambios
Sin ajuste de línea
Vista
Nivel de detalle
Resaltado de sintaxis

Untitled diff

Creado El diff nunca expira
9 eliminaciones
54 líneas
5 adiciones
50 líneas
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);


Diferencias guardadas