update readme

Author: MrWangJustToDo

4.png

@@ -13,6 +13,10 @@ a React/Vue component to show the `git diff`/`file diff` result, just like Githu
 
 ![file mode](fileMode.png)
 
+[GitHub compare](https://mrwangjusttodo.github.io/MrWangJustToDo.io?overlay=open&playGround=GitHub)
+
+![GitHub compare](4.png)
+
 ## Packages
 
 | Package                                  | Version                                                                                                                    |

README.md

@@ -361,7 +361,7 @@ export function Example() {
       <div className="w-[90%] m-auto mb-[1em] mt-[1em]">
         <h2 className=" text-[24px]">
           A <code className=" bg-slate-100 px-[4px] rounded-sm">React</code> /{" "}
-          <code className="bg-slate-100 px-[4px] rounded-sm">Vue</code> component to show the file diff (like Github)
+          <code className="bg-slate-100 px-[4px] rounded-sm">Vue</code> component to show the file/git diff
         </h2>
         <br />
         <p>
@@ -383,21 +383,21 @@ export function Example() {
             className="bg-sky-400 hover:bg-sky-500 px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white"
             onClick={() => setEnableVUE(!enableVUE)}
           >
-            {enableVUE ? "disable Vue" : "enable Vue"}
+            {enableVUE ? "Disable Vue" : "Enable Vue"}
           </button>
           {!wrap && (
             <button
               className="bg-sky-400 hover:bg-sky-500 px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white"
               onClick={() => setScrollBar(!scrollBar)}
             >
-              {scrollBar ? "toggle to disable scrollbar" : "toggle to enable scrollbar"}
+              {scrollBar ? "Toggle to disable scrollbar" : "Toggle to enable scrollbar"}
             </button>
           )}
           <button
             className="bg-sky-400 hover:bg-sky-500 px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white"
             onClick={() => setExpandAll(!expandAll)}
           >
-            {expandAll ? "toggle to collapseAll" : "toggle to expandAll"}
+            {expandAll ? "Toggle to collapseAll" : "Toggle to expandAll"}
           </button>
           <button
             className="bg-sky-400 hover:bg-sky-500 px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white"

ui/react-example/src/Example.tsx

@@ -47,7 +47,7 @@ const _PlayGroundGitDiff = ({ onClick }: { onClick: () => void }) => {
   return (
     <div className="w-[90%] m-auto mt-[1em] mb-[1em]">
       <h2 className="text-[24px]">
-        PlayGround -- input a `git diff` string
+        PlayGround -- provide a `git diff` string
         <div className="ml-4 text-[14px] inline-block">
           <Button onClick={onClick}>go to `file mode`</Button>
         </div>
@@ -91,9 +91,7 @@ const _PlayGroundGitDiff = ({ onClick }: { onClick: () => void }) => {
           diffViewWrap
         />
       ) : (
-        <div className="border mt-[10px] rounded-[4px] p-[10px] text-orange-500 text-[22px]">
-          try to give a `git diff` input, and see the result
-        </div>
+        <div className="border mt-[10px] rounded-[4px] p-[10px] text-orange-500 text-[22px]">Empty</div>
       )}
     </div>
   );
@@ -139,7 +137,7 @@ const _PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
   return (
     <div className="w-[90%] m-auto mt-[1em] mb-[1em]">
       <h2 className="text-[24px]">
-        PlayGround -- provider two file
+        PlayGround -- provide two file content
         <div className="ml-4 text-[14px] inline-block">
           <Button onClick={onClick}>go to `git mode`</Button>
         </div>
@@ -196,9 +194,7 @@ const _PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
           diffViewWrap
         />
       ) : (
-        <div className="border mt-[10px] rounded-[4px] p-[10px] text-orange-500 text-[22px]">
-          Provider two file content, and see the result
-        </div>
+        <div className="border mt-[10px] rounded-[4px] p-[10px] text-orange-500 text-[22px]">Empty</div>
       )}
     </div>
   );