👌 IMPROVE: add view on github button to website

Author: pettiboy

demo-app/public/assets/gh-logo.png

@@ -1,6 +1,7 @@
 import Center from "./components/Center/Center";
 import Navigation from "./components/Navigation/Navigation";
 import ScrollSpy from "react-ui-scrollspy";
+import Buttons from "./components/Buttons/Buttons";
 
 function App() {
   return (
@@ -21,6 +22,8 @@ function App() {
           <h1>Green</h1>
         </Center>
       </ScrollSpy>
+
+      <Buttons />
     </div>
   );
 }

demo-app/src/App.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+interface Props {}
+
+const Buttons = (props: Props) => {
+  return (
+    <a
+      rel="noreferrer"
+      href="https://github.com/pettiboy/react-ui-scrollspy/"
+      target="_blank"
+    >
+      <div className={"button button-size"}>
+        <div style={{ marginRight: 10, marginTop: 5 }}>
+          <img src="/assets/gh-logo.png" height={30} alt="github-logo" />
+        </div>
+        <div>View On Github</div>
+        <div style={{ marginLeft: 10 }}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fillRule="evenodd"
+              d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"
+            />
+            <path
+              fillRule="evenodd"
+              d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"
+            />
+          </svg>
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default Buttons;

demo-app/src/components/Buttons/Buttons.tsx

@@ -21,6 +21,26 @@ code {
   padding: 30px;
   margin: 10px;
 }
+
+.button {
+  bottom: 0;
+  right: 0;
+  position: fixed;
+  background-color: beige;
+  border-radius: 15px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.button-size {
+  margin: 30px;
+  font-size: 20px;
+  padding: 25px 40px;
+}
+
 a {
   color: black;
   text-decoration: none;
@@ -30,4 +50,9 @@ a {
   .ss-item {
     padding: 17px;
   }
+  .button-size {
+    margin: 20px;
+    font-size: 17px;
+    padding: 15px 25px;
+  }
 }

demo-app/src/index.css

@@ -22,7 +22,3 @@ git commit -m "🚀 RELEASE: "
 git commit -m "🤖 TEST: "
 git commit -m "‼️ BREAKING: "
 ```
-
-## TODO
-
-- [ ] view on github button on website