feat: separate dowload button from socials buttons and add icon prop to buttons

Author: MaxIsJoe

components/button.tsx

@@ -1,21 +1,38 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+
 type ButtonProps = {
-    filled: boolean, text: string, linkTo: string
+    filled: boolean, text: string, linkTo: string, buttonIcon?: IconDefinition,
 }
 
 
 const Button = (props: ButtonProps) => {
-    const {filled, text, linkTo} = props;
+    const {filled, text, linkTo, buttonIcon} = props;
     const filledClass = 'bg-gray-800 border-2 border-transparent text-white text-md mr-4 hover:bg-gray-900';
     const outlineClass = 'bg-transparent border-2 border-gray-800 text-white text-md hover:bg-gray-800';
 
     return (
 
             <a href={linkTo}
-                  className={`uppercase py-2 px-4 ${filled ? filledClass : outlineClass}` }>
-                {text}
+                  className={`uppercase py-2 px-4 flex justify-center items-center ${filled ? filledClass : outlineClass}` }>
+                    {ShowIcon(buttonIcon)}
+                <div>
+                    {text}
+                </div>
             </a>
     )
 
 };
 
+function ShowIcon(buttonIcon? : IconDefinition)
+{
+    if(buttonIcon != null)
+    {
+        return <div className="pr-2">
+                <FontAwesomeIcon icon={buttonIcon}></FontAwesomeIcon>
+            </div>
+    }
+    return '';
+}
+
 export default Button;

components/landing/landingButtons.tsx

@@ -3,23 +3,30 @@ import getDownloadLink from '../../lib/platform';
 const githubUrl = 'https://github.com/unitystation/unitystation';
 const discordInviteUrl = 'https://discord.com/invite/tFcTpBp';
 const githubReleases = 'https://github.com/unitystation/stationhub/releases/latest';
+const patreonUrl = 'https://www.patreon.com/unitystation';
+import { faCloudDownload } from '@fortawesome/free-solid-svg-icons';
 
 import {useEffect, useState} from 'react';
 
 
-
 const LandingButtons = () => {
     const [downloadLink, setDownloadLink] = useState(githubReleases);
 
     useEffect(() => {
         getDownloadLink().then((link) => setDownloadLink(link));
     }, []);
 
-    return (<div className={'flex flex-wrap justify-center mt-8 gap-4'}>
-            <Button filled={true} text={'Download'} linkTo={downloadLink}/>
-            <Button filled={false} text={'Github'} linkTo={githubUrl}/>
-            <Button filled={false} text={'Discord'} linkTo={discordInviteUrl}/>
-        </div>)
+    return (
+        <>
+            <div className={'flex flex-wrap justify-center mt-8 gap-4'}>
+                <Button filled={true} text={'Download'} linkTo={downloadLink} buttonIcon={faCloudDownload}/>
+            </div>
+            <div className={'flex flex-wrap justify-center mt-8 gap-4'}>
+                <Button filled={false} text={'Github'} linkTo={githubUrl}/>
+                <Button filled={false} text={'Discord'} linkTo={discordInviteUrl}/>
+                <Button filled={false} text={'Patreon'} linkTo={patreonUrl}/>
+            </div>
+        </>)
 }
 
 export default LandingButtons;