add icon only links

src/app/page.tsx

@@ -15,9 +15,10 @@ export default function Home() {
     avatar,
     name,
     links,
+    socialLinks,
     options,
     description,
-    theme, // Fallback to dark if no theme was found
+    theme,
   } = Config; // All of the settings pulled from the config file
 
   // Theme colors to use when using the selected theme
@@ -85,8 +86,10 @@ export default function Home() {
               <h1 className="text-4xl font-bold">{name}</h1>
             </div>
 
+            {/* Description of user */}
             <p className="mt-4 text-lg max-w-lg">{description}</p>
 
+            {/* Links (Buttons) */}
             <div className="flex flex-col items-center">
               {links.map((link, index) => {
                 const icons: any = link.icon?.split(" ") ?? [];
@@ -98,22 +101,38 @@ export default function Home() {
                     target="_blank"
                     rel="noopener noreferrer"
                     className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded
-                      ${selectedTheme.buttonTextColor} ${link.color.normal} hover:brightness-75 transition`}
+                      ${selectedTheme.buttonTextColor} ${link.color.normal} hover:brightness-75 transition gap-2`}
                   >
-                    {link.icon && (
-                      <>
-                        <FontAwesomeIcon icon={icons} />
-                        <div className="ml-2"></div>
-                      </>
-                    )}
+                    {link.icon && <FontAwesomeIcon icon={icons} />}
                     <p>{link.title}</p>
                   </a>
                 );
               })}
             </div>
+
+            {/* Social Links */}
+            <div className="flex items-center justify-center gap-3 mt-4">
+              {socialLinks &&
+                socialLinks.map((link, index) => {
+                  const icons: any = link.icon?.split(" ") ?? [];
+
+                  return (
+                    <a
+                      key={index}
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`hover:brightness-75 transition`}
+                    >
+                      {link.icon && <FontAwesomeIcon size="2xl" icon={icons} />}
+                    </a>
+                  );
+                })}
+            </div>
           </div>
         </div>
 
+        {/* Footer */}
         <div className="absolute bottom-0 right-0 mb-5 mr-5">
           {options.showSourceLink && (
             <a