add a copy button in the view source modal

This commit is contained in:
paige paigie 2024-11-02 04:05:59 +00:00
parent 9e5f34aaca
commit 4a63057336
2 changed files with 10 additions and 0 deletions

1
web/src/icons/copy.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Zm160-240v-480 480Z"/></svg>

After

Width:  |  Height:  |  Size: 426 B

View file

@ -15,13 +15,22 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import { MemDBEvent } from "@/api/types"
import JSONView from "../../util/JSONView.tsx"
import CopyIcon from "@/icons/copy.svg?react"
interface ViewSourceModalProps {
evt: MemDBEvent
}
// TODO: change the copy button's text on copy, without having typescript scream at me.
// will i need to make a component for the copy button and change its state? hmm
const copyButtonOnClick = (evt: MemDBEvent) => {
navigator.clipboard.writeText(JSON.stringify(evt, null, 4))
}
// TODO check with tulir that he in fact uses material design icons. i got the copy icon from google's site
const ViewSourceModal = ({ evt }: ViewSourceModalProps) => {
return <div className="view-source-modal">
<button onClick={() => {copyButtonOnClick(evt)}}><CopyIcon/> Copy</button>
<JSONView data={evt} />
</div>
}