Make ChessEmbed react component

forked from my own chess embed repo

src/assets/chesscom-embed/default.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 400 400" xml:space="preserve"><style>.st2{fill:#bcbbb7}</style><path fill="#e7e5e3" d="M0 0h400v400H0z"/><path d="M275.8 269.6c-52.8-40.2-46.9-75.2-47.6-89.5h32.2c3.8-6.6 5.7-14 5.7-21.5l-36.5-24c22.6-16.3 27.8-47.9 11.5-70.5-5.6-7.7-13.2-13.8-22.1-17.3-5.9-2.4-47.2 133.4-47.2 133.4-.1 3.1-.2 7.2-.2 12.1 0 13.5 33.1 11.4 31.4 23.4-2.6 17.8-3.2 31.3-18.5 74.1-10.4 28.9-79.4 0-84.3 14.2-3.6 10.6-5.3 21.7-5.2 32.8 0 1.3 2.7 20.4 105.1 20.4s105.1-19.1 105.1-20.4c-.1-29.2-10.9-53.1-29.4-67.2z" fill="#898785"/><path class="st2" d="M198.1 287.6c5.7-25.9 10.7-53.5 13.8-70 3.8-20.6-27.5-24.3-40.3-26.2-.6 17.6-5.5 46.2-47.4 78.2-11.3 8.6-19.7 20.9-24.6 35.8 11.3 5.5 26.4 8.8 49.7 8.8 14.9 0 42.6 1.8 48.8-26.6zM220.1 180.1c5-12.9 4.3-21.5 4.3-21.5l-20.7-24c22-9.4 35.2-27 35.2-47.5 0-15.8-7.4-30.6-19.9-40.2-25.8-10.5-55.3 1.9-65.9 27.7-8.8 21.6-1.7 46.4 17.2 60l-36.5 24c0 7.6 1.9 15 5.7 21.5h80.6z"/><path d="M197.1 53.3c29.1 4.5-13.4 38.4-26.9 36.8-12.7-1.6-.4-41 26.9-36.8z" fill="#dad7d5"/></svg>

src/assets/css/App.css

@@ -527,6 +527,105 @@ a {
   justify-content: center;
 }
 
+.chess{
+  width: 300px;
+  height: calc(125px + 2em);
+  border: none;
+}
+
+#chessProfile {
+  border-radius: 5px;
+  width: 300px;
+  height: calc(125px + 2em);
+  color: #AAAAAA;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  cursor: pointer;
+}
+
+.chessInfo {
+  background-color: rgba(0,0,0,.3);;
+  margin: 1em;
+}
+
+.identity {
+  margin-right: 0px;
+}
+
+.identity h5 {
+  margin: 0px;
+  margin-top: -25px;
+  background: black;
+  z-index: 50;
+  position: relative;
+  width: 90%;
+  margin-left: 10px;
+
+}
+
+.pfpContainer {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.pfpContainer > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.pfp {
+  border-radius: 50%;
+  width: 100px;
+  text-align: center;
+}
+
+.vContainer {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.vItem {
+  display: inline-block;
+}
+
+.vItem p {
+  margin: 0px;
+  display: inline;
+}
+
+.chessIcon {
+  display: inline-block;
+  font-family: Chess New;
+  font-size: x-large;
+  width: 25px;
+  text-align: center;
+}
+
+.rapid {
+  color: #6c9d41;
+}
+
+.blitz {
+  color: #f7c045;
+}
+
+.bullet {
+  color: #a58a45;
+}
+
+.puzzles {
+  color: #db7e3b;
+}
+
+@font-face {
+  font-family: Chess New;
+  src: url('https://www.chess.com/bundles/web/fonts/chessglyph-new.0cc8115c.woff2');
+}
+
 @media screen and (max-width: 1200px) {
 
   #menu {