added icons, updated config to show more examples, and fixed hover

src/app/layout.tsx

@@ -1,7 +1,10 @@
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
 import Config from "../../config.json";
+config.autoAddCss = false;
 
 const inter = Inter({ subsets: ["latin"] });
 

src/app/page.tsx

@@ -1,6 +1,13 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import Config from "../../config.json";
 
+library.add(fab, far, fas);
+
 export default function Home() {
 	return (
 		<main className="flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 text-white">
@@ -46,6 +53,8 @@ export default function Home() {
 
 					<div className="flex flex-col items-center">
 						{Config.links.map((link, index) => {
+							const icons: any = link.icon?.split(" ");
+
 							return (
 								<a
 									key={index}
@@ -55,9 +64,15 @@ export default function Home() {
 								>
 									<div
 										key={index}
-										className={`mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:${link.color.hover}`}
+										className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:brightness-75 transition`}
 									>
-										{link.title}
+										{link.icon && (
+											<>
+												<FontAwesomeIcon icon={icons} />
+												<div className="ml-2"></div>
+											</>
+										)}
+										<p>{link.title}</p>
 									</div>
 								</a>
 							);