@jjordy/swr-devtools
Version:
Devtools for SWR
62 lines (61 loc) • 3.49 kB
JavaScript
import React from "react";
import usePanelState from "./usePanelState";
import { Rnd } from "react-rnd";
import GithubIcon from "../Icons/GithubIcon";
import CloseIcon from "../Icons/CloseIcon";
import themes from "../themes";
export default function Panel({ toolbarPosition, previousToolbarPosition, show, children, toggleShow, debug, }) {
const { theme, handleChangeTheme, width, height, x, y, setResizing, resizing, handleResize, } = usePanelState({
toolbarPosition,
previousToolbarPosition,
debug,
show,
});
return (React.createElement(React.Fragment, null, show && (React.createElement(Rnd, { onResizeStop: handleResize, onResizeStart: () => {
if (!resizing) {
setResizing(true);
}
}, default: {
x,
y,
width,
height,
}, style: {
cursor: "auto",
position: "fixed",
zIndex: 999999,
} },
React.createElement("div", { style: themes[theme].container },
React.createElement("div", { style: themes[theme].header },
React.createElement("span", { style: {
fontSize: 16,
fontWeight: 600,
userSelect: "none",
} }, "SWR Devtools"),
React.createElement("div", { style: { display: "flex" } },
React.createElement("button", { type: "button", "aria-label": "Close SWR Devtools", title: "Close", onClick: toggleShow, style: {
border: 0,
padding: "0.5rem",
backgroundColor: "transparent",
} },
React.createElement(CloseIcon, null)))),
children({ theme, width, resizing }),
React.createElement("div", { style: themes[theme].bottom },
React.createElement("a", { target: "_blank", href: "https://github.com/jjordy/swr-devtools", "aria-label": "Check us out on Github" },
React.createElement(GithubIcon, { fill: theme === "Dark" ? "white" : "black" })),
React.createElement("div", { style: { display: "flex", alignItems: "center" } },
React.createElement("label", { htmlFor: "select_theme", "aria-label": "Select a theme", style: {
marginRight: "1rem",
color: theme === "Dark" ? "#FFF" : "#222",
} }),
React.createElement("button", { style: { border: 0, backgroundColor: "transparent" }, "aria-label": `Toggle Theme - Current (${theme})`, onClick: () => {
if (theme === "Dark") {
handleChangeTheme("Light");
}
else {
handleChangeTheme("Dark");
}
} },
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: theme === "Dark" ? "#FFF" : "#000", viewBox: "0 0 24 24" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }))))))))));
}