update

Author: MrWangJustToDo

pnpm-lock.yaml

@@ -10,16 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^2.19.10",
+    "@codesandbox/sandpack-react": "^2.20.0",
     "@git-diff-view/file": "workspace:*",
     "@git-diff-view/react": "workspace:*",
     "@git-diff-view/shiki": "workspace:*",
     "@git-diff-view/vue": "workspace:*",
-    "@mantine/core": "^7.15.1",
-    "@mantine/hooks": "^7.15.1",
+    "@mantine/core": "^7.17.1",
+    "@mantine/hooks": "^7.17.1",
     "@my-react/react": "^0.3.6",
     "@my-react/react-dom": "^0.3.6",
-    "@tabler/icons-react": "^3.26.0",
+    "@tabler/icons-react": "^3.31.0",
     "lodash": "^4.17.21",
     "overlayscrollbars": "^2.10.0",
     "react": "^18.2.0",

ui/react-example/package.json

@@ -1,6 +1,6 @@
 import { AppShell, Group, Title, Button, Flex, Burger, Space, useMantineColorScheme, em } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconMoon, IconSun } from "@tabler/icons-react";
+import { IconBrandGithub, IconMoon, IconSun } from "@tabler/icons-react";
 
 import { DevTool } from "./components/DevTool";
 import { ExampleContent } from "./components/ExampleContent";
@@ -56,7 +56,7 @@ function App() {
               href="https://github.com/MrWangJustToDo/git-diff-view"
               target="_blank"
             >
-              <Github className="!w-[1.42em] text-gray-400" />
+              <IconBrandGithub className="text-gray-400" />
             </Button>
             <Button variant="light" className="text-sm" onClick={toggleColorScheme} color="violet">
               {colorScheme === "light" ? (

ui/react-example/src/App.tsx

@@ -1,4 +1,5 @@
-import { Button } from "@mantine/core";
+import { Button, ButtonGroup } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
 import { useState } from "react";
 
 const src = "https://mrwangjusttodo.github.io/myreact-devtools";
@@ -25,26 +26,32 @@ async function init() {
 }
 
 export const DevTool = () => {
+  const [hide, setHide] = useState(false);
+
   const [open, setOpen] = useState(false);
 
   return (
-    <Button
-      className="fixed bottom-16 left-4 z-50"
-      color="red"
-      size="md"
-      onClick={async () => {
-        if (!open) {
-          await init();
-
-          setOpen(true);
-        } else {
-          getFunc()?.["close"]?.();
-
-          setOpen(false);
-        }
-      }}
-    >
-      {!open ? "Open" : "Close"} DevTool
-    </Button>
+    <ButtonGroup className="fixed bottom-16 left-4 z-50" style={{ display: hide ? "none" : undefined }}>
+      <Button
+        color="red"
+        size="md"
+        onClick={async () => {
+          if (!open) {
+            await init();
+
+            setOpen(true);
+          } else {
+            getFunc()?.["close"]?.();
+
+            setOpen(false);
+          }
+        }}
+      >
+        {!open ? "Open" : "Close"} DevTool
+      </Button>
+      <Button size="md" className="px-2" variant="light" onClick={() => setHide(true)}>
+        <IconX />
+      </Button>
+    </ButtonGroup>
   );
 };

ui/react-example/src/components/DevTool.tsx

@@ -7,8 +7,9 @@ import {
   SandpackProvider,
 } from "@codesandbox/sandpack-react";
 import { Box, Card, useMantineColorScheme } from "@mantine/core";
+import { IconBrandVue } from "@tabler/icons-react";
 
-import { Vue } from "./icons";
+// import { Vue } from "./icons";
 import { f1, f2 } from "./ReactPlayGround";
 
 export const VuePlayGround = () => {
@@ -17,7 +18,7 @@ export const VuePlayGround = () => {
   return (
     <Card className="p-0" withBorder>
       <Box className="flex items-center px-2 py-2 font-sans text-[14px]">
-        <Vue width="16" className="vue-icon mr-2" /> Vue
+        <IconBrandVue size="16" color="#42b883" className="mr-2" />Vue
       </Box>
       <SandpackProvider
         template="vite-vue-ts"

ui/react-example/src/components/VuePlayGround.tsx

@@ -1,2 +1 @@
 export * from "./Github";
-export * from "./Vue";