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) {
- ;
+
>;
}
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 = () => {
+
+
+
Source
+
|
+
Bug?
+
|
+
+
|
+
+
|
+
+
+
+
+ C0ntroller_Z#3883
+
+
+
+
+
>);
};
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;
}