From 4a869f2f6a72301947937ed15a8d66ef3b4de738 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel.kluge.98@gmx.de>
Date: Fri, 17 Dec 2021 20:43:54 +0100
Subject: [PATCH] Add socials

---
 package-lock.json      | 18 ++++++++++
 package.json           |  1 +
 pages/_app.tsx         |  2 +-
 pages/index.tsx        | 22 ++++++++++++
 styles/Home.module.css | 79 +++++++++++++++++++++++++++++++++++++++++-
 styles/globals.css     |  1 +
 6 files changed, 121 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0c6ac64..22df8c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "my_website",
       "dependencies": {
         "next": "12.0.7",
+        "phosphor-react": "^1.3.1",
         "react": "17.0.2",
         "react-dom": "17.0.2"
       },
@@ -4476,6 +4477,17 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/phosphor-react": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/phosphor-react/-/phosphor-react-1.3.1.tgz",
+      "integrity": "sha512-N4dk4Lrl8Pa2V9cImw/6zP8x9oPFOSh6ixtSvB73zmcpKrX6Sb+lPlu6Y222VOwZx19mfo01bP+OeAbXHw95Jg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -8937,6 +8949,12 @@
         "sha.js": "^2.4.8"
       }
     },
+    "phosphor-react": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/phosphor-react/-/phosphor-react-1.3.1.tgz",
+      "integrity": "sha512-N4dk4Lrl8Pa2V9cImw/6zP8x9oPFOSh6ixtSvB73zmcpKrX6Sb+lPlu6Y222VOwZx19mfo01bP+OeAbXHw95Jg==",
+      "requires": {}
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
diff --git a/package.json b/package.json
index 5138180..2f38902 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "next": "12.0.7",
+    "phosphor-react": "^1.3.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
diff --git a/pages/_app.tsx b/pages/_app.tsx
index fac2b55..a9d8c50 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -31,7 +31,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       <meta name="msapplication-TileImage" content="/mstile-310x310.png" />
       <meta name="theme-color" content="#444444" />
     </Head>
-    <Component {...pageProps} />;
+    <Component {...pageProps} />
   </>;
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 0f13d6d..c79478e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,7 @@
 import type { NextPage } from "next";
 import Head from "next/head";
+import Link from "next/link";
+import { GithubLogo, InstagramLogo, DiscordLogo } from "phosphor-react";
 import REPL from "../components/REPL";
 import styles from "../styles/Home.module.css";
 
@@ -10,6 +12,26 @@ const Home: NextPage = () => {
     </Head>
     <div className={styles.container}>
       <REPL />
+      <div className={styles.footer}>
+        <span className={styles.spacer} />
+        <Link href="https://git.c0ntroller.de/c0ntroller/frontpage"><a>Source</a></Link>
+        <span className={styles.divider}>|</span>
+        <Link href="https://git.c0ntroller.de/c0ntroller/frontpage/issues/new"><a>Bug?</a></Link>
+        <span className={styles.divider}>|</span>
+        <Link href="https://github.com/C0ntroller" passHref><GithubLogo color="var(--repl-color)" weight="light" className={styles.iconLink} /></Link>
+        <span className={styles.divider}>|</span>
+        <Link href="https://github.com/C0ntroller" passHref><InstagramLogo color="var(--repl-color)" weight="light" className={styles.iconLink} /></Link>
+        <span className={styles.divider}>|</span>
+        <Link href="https://github.com/C0ntroller" passHref>
+          <span className={styles.tooltip}>
+            <DiscordLogo color="var(--repl-color)" weight="light" className={styles.iconLink} />
+            <span className={styles.tooltiptext}>
+              C0ntroller_Z#3883
+            </span>
+          </span>
+        </Link>
+        <span className={styles.spacer} />
+      </div>
     </div>
   </>);
 };
diff --git a/styles/Home.module.css b/styles/Home.module.css
index a41afc5..873e4b4 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -4,4 +4,81 @@
     height: 100vh;
     margin: 0;
     padding: 10px;
-}
\ No newline at end of file
+}
+
+.footer {
+    flex-shrink: 5;
+    text-align: center;
+    font-family: "Segoe UI", Roboto, Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+.footer * {
+    margin: auto 0;
+}
+
+.footer a:active,
+.footer a:visited,
+.footer a {
+    color: var(--repl-color);
+    text-decoration: underline;
+    font-size: 80%;
+}
+
+.footer a:hover {
+    color: var(--repl-color-link);
+}
+
+.footer .divider {
+    color: var(--repl-color);
+    margin: 0 5px;
+    font-size: 80%;
+}
+
+.footer .spacer {
+    flex-grow: 1;
+}
+
+.iconLink {
+    cursor: pointer;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 140px;
+    background-color: #333;
+    color: var(--repl-color);
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.1s;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
diff --git a/styles/globals.css b/styles/globals.css
index 808c6a8..2d2c3c0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -6,6 +6,7 @@
 * {
   box-sizing: border-box;
   --repl-color: #188a18;
+  --repl-color-link: #2ac02a;
   --repl-color-hint: #092909;
 }