Socials as data

data/socials.tsx

@@ -0,0 +1,38 @@
+import { Github, Linkedin, Instagram, Discord, Steam } from "@icons-pack/react-simple-icons";
+
+interface Social {
+    name: string;
+    url: string;
+    icon: JSX.Element;
+}
+
+export const socials = (iconSize?: string, color?: string): Social[] => {
+    iconSize = iconSize || "1em";
+    console.log(iconSize);
+
+    return [
+        {
+            name: "GitHub",
+            url: "https://github.com/C0ntroller",
+            icon: <Github size={iconSize} title="GitHub" color={color} />,
+        }, {
+            name: "LinkedIn",
+            url: "https://www.linkedin.com/in/c0ntroller/",
+            icon: <Linkedin size={iconSize} title="Linked" color={color} />,
+        }, {
+            name: "Instagram",
+            url: "https://www.instagram.com/c0ntroller/",
+            icon: <Instagram size={iconSize} title="Instagram" color={color} />,
+        }, {
+            name: "Steam",
+            url: "https://steamcommunity.com/id/c0ntroller/",
+            icon: <Steam size={iconSize} title="Steam" color={color} />,
+        }, {
+            name: "Discord",
+            url: "https://discordapp.com/users/224208617820127233",
+            icon: <Discord size={iconSize} title="Discord" color={color} />
+        }
+    ];
+};
+
+export default socials;

pages/me.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 import Link from "next/link";
+import Image from "next/image";
 import { useEffect } from "react";
 import { Discord, Github, Instagram, Steam, Linkedin } from "@icons-pack/react-simple-icons";
 import Layout from "../components/Blog/Layout";
@@ -9,7 +10,7 @@ import pic from "../public/img/me.png";
 
 import skills, { AdditionalSkill, Skill, SkillCard } from "../data/skills";
 import achievements from "../data/achievements";
-import Image from "next/image";
+import socials from "../data/socials";
 
 const Badge: NextPage<{ additional: AdditionalSkill }> = ({ additional }) => {
     return <div className={styles.badge}>
@@ -107,11 +108,11 @@ const Me: NextPage = () => {
         </div>
         <h2>Social Media</h2>
         <div className={styles.socials}>
-            <a href="https://github.com/C0ntroller" target="_blank" rel="noreferrer" className="nocolor"><Github size="2em" title="Github" /></a>
+            {socials("2em").map((social, i) => 
-            <a href="https://www.linkedin.com/in/c0ntroller/" target="_blank" rel="noreferrer" className="nocolor"><Linkedin size="2em" title="Linked" /></a>
+                <a key={i} href={social.url} target="_blank" rel="noreferrer" className="nocolor">
-            <a href="https://www.instagram.com/c0ntroller/" target="_blank" rel="noreferrer" className="nocolor"><Instagram size="2em" title="Instagram" /></a>
+                    {social.icon}
-            <a href="https://steamcommunity.com/id/c0ntroller/" target="_blank" rel="noreferrer" className="nocolor"><Steam size="2em" title="Steam" /></a>
+                </a>
-            <a href="https://discordapp.com/users/224208617820127233" target="_blank" rel="noreferrer" className="nocolor"><Discord size="2em" title="Discord" /></a>
+            )}
         </div>
         <h2>Achievements</h2>
         {achievements().map((achievement, i) => <div key={i} className={styles.achievement}>

pages/terminal.tsx

@@ -8,11 +8,14 @@ import { useCommands } from "../lib/commands/ContextProvider";
 import { useModalFunctions } from "../components/Terminal/contexts/ModalFunctions";
 import ProjectModal from "../components/Terminal/ProjectModal";
 import REPL from "../components/Terminal/REPL";
-import styles from "../styles/Terminal/Terminal.module.css";
 import type { ContentList } from "../lib/content/types";
 import { useRouter } from "next/router";
 import Rainbow from "../lib/colors";
 
+import styles from "../styles/Terminal/Terminal.module.css";
+
+import socials from "../data/socials";
+
 const Terminal: NextPage<{ buildTime: string }> = ({ buildTime }) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const { modalFunctions } = useModalFunctions();
@@ -67,22 +70,10 @@ const Terminal: NextPage<{ buildTime: string }> = ({ buildTime }) => {
                 <span className={styles.divider}>|</span>
                 <a href="mailto:admin-website@c0ntroller.de" rel="noreferrer" className={styles.iconLink}><Icon path={mdiEmail} color="var(--repl_color)" size="1.5em" id="mdi_terminal_nav_email" title="Email" /></a>
                 <span className={styles.divider}>|</span>
-                <a href="https://github.com/C0ntroller" target="_blank" rel="noreferrer" className={styles.iconLink}><Github color="var(--repl_color)" size={iconSize} title="Github" /></a>
+                {socials(iconSize, "var(--repl_color)").map((social, i) => <>
-                <span className={styles.divider}>|</span>
+                    {i !== 0 ? <span className={styles.divider} key={`d${i}`}>|</span> : null}
-                <a href="https://www.linkedin.com/in/c0ntroller/" target="_blank" rel="noreferrer" className={styles.iconLink}><Linkedin color="var(--repl_color)" size={iconSize} title="LinkedIn" /></a>
+                    <a key={i} href={social.url} target="_blank" rel="noreferrer" className={styles.iconLink}>{social.icon}</a>
-                <span className={styles.divider}>|</span>
+                </>)}
-                <a href="https://www.instagram.com/c0ntroller/" target="_blank" rel="noreferrer" className={styles.iconLink}><Instagram color="var(--repl_color)" size={iconSize} title="Instagram" /></a>
-                <span className={styles.divider}>|</span>
-                <a href="https://steamcommunity.com/id/c0ntroller/" target="_blank" rel="noreferrer" className={styles.iconLink}><Steam color="var(--repl_color)" size={iconSize} title="Steam" /></a>
-                <span className={styles.divider}>|</span>
-                <a href="https://discordapp.com/users/224208617820127233" target="_blank" rel="noreferrer" className={styles.iconLink}>
-                    <span className={styles.tooltip} style={{ cursor: "pointer" }}>
-                        <Discord color="var(--repl_color)" size={iconSize} title="Discord" />
-                        <span className={styles.tooltiptext}>
-                            C0ntroller_Z#3883
-                        </span>
-                    </span>
-                </a>
                 <span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
             </div>
             <REPL inputRef={inputRef} buildTime={buildTime} />