From f4b81d3fd4943ee501cdb777cd85fdadd36604ea Mon Sep 17 00:00:00 2001
From: Aaron Yu <yityu@microsoft.com>
Date: Wed, 22 Dec 2021 18:06:20 +0800
Subject: [PATCH] basic finish

---
 package-lock.json             | 331 ++++++++++++++++++++++++++++++++++
 package.json                  |   3 +
 src/App.js                    |  37 ++--
 src/Components/pane/index.css |  21 +++
 src/Components/pane/index.js  |  91 ++++++++++
 src/images/android.png        | Bin 0 -> 1462 bytes
 src/images/ipad.png           | Bin 0 -> 1724 bytes
 src/images/iphone.png         | Bin 0 -> 1701 bytes
 8 files changed, 468 insertions(+), 15 deletions(-)
 create mode 100644 src/Components/pane/index.css
 create mode 100644 src/Components/pane/index.js
 create mode 100644 src/images/android.png
 create mode 100644 src/images/ipad.png
 create mode 100644 src/images/iphone.png

diff --git a/package-lock.json b/package-lock.json
index c1f51da..c8e738a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1242,6 +1242,142 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
       "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
     },
+    "@emotion/babel-plugin": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
+      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "babel-plugin-macros": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+          "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+          "requires": {
+            "@babel/runtime": "^7.7.2",
+            "cosmiconfig": "^6.0.0",
+            "resolve": "^1.12.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz",
+      "integrity": "sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+      "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "@emotion/styled": {
+      "version": "11.6.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.6.0.tgz",
+      "integrity": "sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.3.0",
+        "@emotion/is-prop-valid": "^1.1.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.0.0"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@@ -1796,6 +1932,112 @@
         }
       }
     },
+    "@mui/base": {
+      "version": "5.0.0-alpha.61",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.61.tgz",
+      "integrity": "sha512-xB2EksQsLYOwmBQRDdcJjKAflgBYE9KBZS/TBxIKBlfi4w1v7kCi5VCHTHIQgPSjgoTSt3hyI+yHO2fLvCbUWQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@emotion/is-prop-valid": "^1.1.1",
+        "@mui/utils": "^5.2.3",
+        "@popperjs/core": "^2.4.4",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
+    "@mui/material": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.5.tgz",
+      "integrity": "sha512-I0A5IgZlJVyVe9PUrXXuknAbdgij2wVynC2/iyBvoMwc79PoksUZTY4qKPfoy0gDyMRlexRGxZ68XpX5pleMgQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@mui/base": "5.0.0-alpha.61",
+        "@mui/system": "^5.2.5",
+        "@mui/types": "^7.1.0",
+        "@mui/utils": "^5.2.3",
+        "@types/react-transition-group": "^4.4.4",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.2.3.tgz",
+      "integrity": "sha512-Lc1Cmu8lSsYZiXADi9PBb17Ho82ZbseHQujUFAcp6bCJ5x/d+87JYCIpCBMagPu/isRlFCwbziuXPmz7WOzJPQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@mui/utils": "^5.2.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.2.5.tgz",
+      "integrity": "sha512-vNEB2SXCetXKLeMZ49SZLWeiX8uQeLI/jk/dzqnYdGJx8Eq98hCfTucDfJwt2RUhSYGH/3BET2pZqT3w8aOTzQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@emotion/cache": "^11.6.0",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@mui/system": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.2.5.tgz",
+      "integrity": "sha512-UHKsEZCZa0wuR9w8EXRmDVolHjjFBWinMhSmaRuR6nbmxVMUq7AhF5N0+Aw4IhFSehwfpVpf8FOlZDfg9QnGBA==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@mui/private-theming": "^5.2.3",
+        "@mui/styled-engine": "^5.2.5",
+        "@mui/types": "^7.1.0",
+        "@mui/utils": "^5.2.3",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@mui/types": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.0.tgz",
+      "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ=="
+    },
+    "@mui/utils": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.2.3.tgz",
+      "integrity": "sha512-sQujlajIS0zQKcGIS6tZR0L1R+ib26B6UtuEn+cZqwKHsPo3feuS+SkdscYBdcCdMbrZs4gj8WIJHl2z6tbSzQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@types/prop-types": "^15.7.4",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1842,6 +2084,11 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@@ -2390,6 +2637,11 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.2.tgz",
       "integrity": "sha512-ekoj4qOQYp7CvjX8ZDBgN86w3MqQhLE1hczEJbEIjgFEumDy+na/4AJAbLXfgEWFNB2pKadM5rPFtuSGMWK7xA=="
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -2405,6 +2657,32 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "@types/react": {
+      "version": "17.0.37",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
+      "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -2418,6 +2696,11 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
     },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -3575,6 +3858,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4062,6 +4350,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
@@ -4289,6 +4582,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -5275,6 +5577,11 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -5649,6 +5956,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9430,6 +9745,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -10285,6 +10611,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 617afa9..5be1064 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/material": "^5.2.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
diff --git a/src/App.js b/src/App.js
index 3784575..7bfde41 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,30 @@
-import logo from './logo.svg';
+import { useState } from 'react';
 import './App.css';
+import Pane from './Components/pane';
 
 function App() {
+  var [mode, setMode] = useState("normal")
+  var [projects, setProjects] = useState([])
+
+  fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
+    method: 'GET',
+    mode: 'no-cors',
+    cache: 'no-cache',
+    headers: new Headers({'content-type': 'application/json'}),
+  }).then((t) => {
+    console.log(t, t.json())
+    // setProjects(value)
+  })
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Pane
+        mode={mode}
+        onModeChange={(_mode) => setMode(_mode) }/>
+      {
+        mode === "normal"
+        ? <div>media content</div>
+        : <div>setting content</div>
+      }
     </div>
   );
 }
diff --git a/src/Components/pane/index.css b/src/Components/pane/index.css
new file mode 100644
index 0000000..c0da2c8
--- /dev/null
+++ b/src/Components/pane/index.css
@@ -0,0 +1,21 @@
+.Pane {
+    width: 25vw;
+    min-width: 200px;
+    background-color: blue;
+    height: 100vh;
+}
+
+.modeSelect {
+    width: 100%;
+    border: none;
+}
+
+.deviceIcon {
+    width: auto;
+    height: 80px;
+    margin-right: 10px;
+}
+
+.deviceContent {
+    color: white;
+}
\ No newline at end of file
diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js
new file mode 100644
index 0000000..ac60855
--- /dev/null
+++ b/src/Components/pane/index.js
@@ -0,0 +1,91 @@
+import './index.css';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem'
+import { useState } from 'react';
+import { Chip, List, ListItem } from '@mui/material';
+import ipadPng from '../../images/ipad.png'
+import iphonePng from '../../images/iphone.png'
+import androidPng from '../../images/android.png'
+
+var deviceConfigs = [
+  {
+    name: 'iPhone',
+    icon: iphonePng,
+    vertical: 'iphone-v',
+    horizental: 'iphone-h'
+  },
+  {
+    name: 'Android Phone',
+    icon: androidPng,
+    vertical: 'android-v',
+    horizental: 'android-h'
+  },
+  {
+    name: 'iPad',
+    icon: ipadPng,
+    vertical: 'iPad-v',
+    horizental: 'iPad-h'
+  },
+];
+
+function Pane(props) {
+  var [mode, setMode] = useState(props.mode);
+  var [device, setDevice] = useState(props.device)
+  
+  var modeChange = (e) => {
+    var _mode = e.target.value;
+    setMode(_mode);
+    props.onModeChange(e.target.value)
+  };
+
+  var deviceChange = (_device) => {
+    setDevice(_device);
+    props.onDeviceChange(_device)
+  };
+
+  return (
+    <div className="Pane">
+      <Select
+            id="mode-select"
+            value={mode}
+            onChange={(e) => modeChange(e)}
+            sx={{
+              width: '100%',
+              border: 'none',
+              background: 'white'
+            }}
+        >
+            <MenuItem value={'normal'}>Normal Preview</MenuItem>
+            <MenuItem value={'dynamic'}>Dynamic Preview</MenuItem>
+        </Select>
+        <List>
+        {
+          deviceConfigs.map(_device =>
+            <ListItem
+              key={_device.name}
+              sx={{
+              display: 'flex'
+            }}>
+              <img className='deviceIcon' src={_device.icon} alt={_device.name}/>
+              <div className='deviceContent'>
+                <p>{_device.name}</p>
+                <div className='deviceButtons'>
+                  <Chip label='横屏'
+                    onClick={() => deviceChange(_device.horizental)}
+                    color={ device === _device.horizental ? 'success' : 'default'}/>
+                  <Chip label='竖屏'
+                    onClick={() => deviceChange(_device.vertical)}
+                    color={ device === _device.vertical ? 'success' : 'default'}/>
+                </div>
+              </div>
+            </ListItem>)
+        }
+        </List>
+        <div>
+
+        </div>
+    </div>
+  );
+}
+
+export default Pane;
diff --git a/src/images/android.png b/src/images/android.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6fa595a85f0faeb7f154b5b6b14b83675387f12
GIT binary patch
literal 1462
zcmaKscT5v_6vvB{EubjF9*To;9$J)B8FC&|!P7D&3WP8Up&*Kk3YK9lP#JBZ43X6q
zA&R98p`d_@EoGE4N*RSxS{brYi)@P5i^=7ZOMJ=iz3=b)J}-Is{qak2f?QEn1StXl
z0A&YzTNg>aBsm`P(vm#<K;0YwkXm)R=4N*#?3%=pM1Oz(5ApNd)zu{dMn*<{j{WFz
zIGq1u|21I<{10GkY>dn04h;=ukf{HTuvjdK?&;|nA0O}S?fv2NcszkXAQTE=vG}*N
zb}E&6J0T|?OKfj%Z)<DIAk`;eiIVF(ddJ}4AdXar!{O4>(irW`va+)D^mIHPPp8u#
zVn{R^jZ7v>7%Z_a9z$Yw4=|WLk{u)gi_Ihu2%&M=OcuMOq$Hz+Dp?>jKAX?yGkg2{
z`uf;xHWEh)jKNiZ7-$r}^)7^$H+Gi~RExI0Ly3sUisZ7+*Y*6y<&7QcSff7y5lK#o
zs7OZD<-HL$f8N+Z)@5e26c)Eu`x0UzDQL=2?X!-0-{R=X;kw=_0e60;m{C*5Y5Tgl
zi)kV~q~hV^^zKQ1*mE?xp#VxkydUlBnH<Np6b{ZzecjrH5@Tbl@GqE+NGiU7UYSVE
z3ob<#wN{VJ&%#O{V&4~zF3d%~OeHXC{0K2o<W#@n2O;6UD9LNWB3&S^0G(g6_bF*g
zNz3k0kWmE6J=MUe8t*-zy#Fvr+d%&aR$fI-{m{Xzqq@hp&uU>ZGR0?%PUjguNzc_g
zhD}S}CVFfL?>dXe#|c4VOY1^28|yGZxCu-w$jwhn-!WZ(VlGCnKh6yb=6leH^#Fjh
zoP({ETeSBQHy~odQd{<m;XcL0#J?hJt4kOQ;Vumk_wQRRfM=GM!Gsk!k4CdZG))IC
zo6}bwv2Kfay3$4)f0B(|Q`Ld5N+HiVK0vSBQE6ZMTkch2|8J+18al=RewNDc{6MW_
zk8?uZ>pW#2rPosZAmx^G{s#{?2X}r^VR!WTNMmF-vIAFT^VMQHPrf#VybUt#(KFTa
zE)7Bz%Uoh0FNpByhyvCt3Y5)-)^>Ks=#I-<OxcqY;|e_U3uwPsGDWh*3MS_p76r#%
zxEu+0SBhFEVJQ34>(-7eCwq7GM1)18YC?)E*jbPLbnk5~ZcgrTMDlDZIYBVz3GmvQ
z?OE5jxknyqFv?{)vk;$X+?>}@WY+=Y@A|5}S~vM)WFAJ%0DZ!F(UxXxaA-+5{gKQm
z;Vhj#@iD-=!L@W1)IqJYIkRba0$Bd704PT(n%Vo=c>Cq?IBtsDCJS8ba8KR9)6hOT
z>Bc9wLt~ejp^sgEi%PL`pylMMQB$`NURG`DF)^8%n-uiPFB6}PH)^lYSA^3G&o{IK
zCb}27v$Nc#i>k|Dl&S!6K1&;P^-_W;I<-*MaZD$*I{>;RK6o}^9UdMFnE#6GoWqsw
zaL}3D7IossnU0yN#8|j~Zl;kyVY30M@3^Zg9Nv=Kj&H3MDS`b&3nt)ohX1V;x}Ake
zkOi8~_+F^FIZb{exaie7g%YF8w80bi^1M`Dg-65fO}BRYd>LWi7Odpdu<?J)I_)5w
zrtBc%?OU?Sen2af7D)OT*UJAW$lAdaWX+Z@jBqwLvpB!!nbgi~4G`=I#1f@qeRn?3
zS77}<wS1@?*dTy);M6F$$s0PJ<`+V*=cty?+l1Z`yffJM!Jb%4;Ws<Q5hwJZy!s}u
zH}y5~t7_$Uy~w8oO&pD@>P9ct6rK)Oxt<#s90H<3MEY74<&+So3eUSLq*1vXNO0ET
z>UM>Dnq8)eM%v)~3L+p2lmn5u;Vq+aCuuM)DF>6}UX-Lskr`@!FO}l`vJ!NYwerue
N=3oc0t+e)e^f&nN!b$)D

literal 0
HcmV?d00001

diff --git a/src/images/ipad.png b/src/images/ipad.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ec19008085583db81419c901476fa130875fbec
GIT binary patch
literal 1724
zcmb_cX;hMF6eg`S%W`+LO$)=)Oe)K!X-Y>jP06inIa-ZnnPaw?TZ)d8E0U?HAm9?3
zhzc$Zj+#=ACAbHnvV71cr6@#V3NFmo%-{Jp^PKZO_dfTY^W68nKi*6qq`SVJr5*$V
z(f2s!<_E@L@E~=yK`!C@c0(XqSA4tz5big;z{>v)7!20j+|1+g000n)L_(oZAP|6(
zPN##jT3cKBd?Bu)AvUYzT4HW!TuyOiLt9&0&mcQGy%<BJ4)WelD%D@qngQNB46!ac
z0}q8lsZW{Iw(k1+dfcN19I1guqj9<1xJ=?J;n+PaITlU0hplD<WBsG=z#`b<^Z8*3
zxdhf2S){=;$E4G$@Pu6O8vi_YbaWI<hKGki=5RP5v)OErAF^k!{qgZ0Q<2p-jU)@a
zs|1*VnMeFZKMD|3|CS7B(0$4?)HgV;stQ<&eLjimk`=w4BaX~x_bbc!3mLs%61rqq
zu8J_C4r+LNhV~}p$p>EwfUFYSVMqh(#Kptv_|7T6YT$Oqgip0FwMW5vExMD2k50$;
zaK%1kVe(5k8<4ybj76stPE*B0f)CePBq`mWd%5CNmcpAXh+<4s2p6Ln(!?%VK#izU
zxOA5G=Kg@PfHUV?4J5yi<A>G1w0<lZoxl6%ROHi7;41LU52@Jda8w?c4-E~)W)L`l
zBtDZkFfdS2QBnAaipJNOn3!-l+?aG+bUKd1<(itBR#sMab+hiI6=Mi>+4x!#iNxk`
z3d-u@vWUjU#zZ2K$z%@x4bZ2rudlba7hK@K0>cz6f{p$tKcqionU?nQ6)SagSLv-@
zqrY~YfswJPnYoFD<%W%$Hd`K#%gn~y&+#<$#4x57G#$qa<!TKGwQR%UB9hVJogn)r
zHJYh-^uo8ekY%;y0W^18KJ20GH~rs%0Zp@$<QiF$-*dH1zFeLU^(TH-&j&p0l)+A=
z<Q5iTaW>oScJ6Y7@BZXqWd?z0@Aq(X35Z=bh10Iz>u!=d*a94k3=ueV(fzX{NCs8d
zMpLs8Smmf~7t8JiJz{65dK)KZ2M#lPC-SpKzFu0xIlT|Am7BHHkwbR`sPr%?uh?&B
zScxuK9%g6Yb+g7bBK7FzI#<0^FJ|P|G8d;KBr%@&&@#`<^Sm*t)6!~!L_iXvQuZXJ
zwC7zUL-ZBdkrSc=fnIQ}<UNgB)#%`)XOy4)XQ2qfIZ4wC?~*ji`iUxZqEDJZK!Iah
zOfMWA%nX)uD76&+t_(#`!^`ApXKSPKmF`quXKS8vgQ0KpT+C0GF8bIXsVgAQKy5cF
zp!G*Q#~z%wYIGd`PS<beq2Ef2#1H}uq0!EE*lrVoxSIk6LI<PTAh_3I7oLix5nrz&
zj7+elQtPeK+*fPYO|Q;1^ldsf=z?nJSvwxy&9O~v!XG?zb{w9mG;|5a=lDjTLT5Cs
zq7ZwtEetFH<(rp(oB_2PWO3VRj~8@|Js6!a)A^Hmc1Xq8<oHPOi4KiSaJ_kcZ1%i~
z)IR^fVxIV`v>!%R-Qd|AX5vviR9lJqgf*=r-7H~y3};|=T<rB^JqzDGY);Zi%8tFY
z&@*24qG-<elVeBl(7X2=m%4sjLsUpbm`zi+HZLXPue`o3%+PqSgm5_k*|{&yscBQA
z1?nge-ZB%@Q+V}syi_pF2ocdguAEL<l!V{SU-tugLH+oI(0Lwl>D1wx(&NfyXI7Eo
z5uujlIc-_bYTr6};+5ZLD*2wY7EX<-o#!+Ok1et?-4mKrlEZAApH6!z@2Bz)eBQ7k
z>DW+{Hff}sqH2E$TvK20Q>-v@-mDKJBLgMo5X*p++gHq(u5Z!T4fOSr%bY*9?{a{~
z$*#CrwvLV`(qL<P8fz(KzXx~CZ;y7cIn0nbRW$HDDDizh^Or4LuP(9#ia<6tF6w>8
zt<eS6`Wd)pcWE4hXMri*b94XKrmEh?8FQzrs-SY@K9cT4Sc2=J6~wisIt7;lu_dlI
zEz)&B^Ps7dtCwr-`1R!D=NQ`&$)RqC)K&WZdsWpuokFij6%1}K;kOS<ptT6^A1Usw
cfDwJpkg#NLUu8ad^4q83fk3)ZT`#2k1xnbOYybcN

literal 0
HcmV?d00001

diff --git a/src/images/iphone.png b/src/images/iphone.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab85ce290ce1a98979033c917f145e6dd7d8f0f4
GIT binary patch
literal 1701
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

literal 0
HcmV?d00001