1 files changed, 80 insertions, 0 deletions

diff --git a/frontend/src/components/Sidebar/Footer.tsx b/frontend/src/components/Sidebar/Footer.tsx
new file mode 100644
index 0000000..070301a
--- /dev/null
+++ b/frontend/src/components/Sidebar/Footer.tsx
@@ -0,0 +1,80 @@
+import React, { useRef } from "react";
+import { Link } from "react-router-dom";
+
+import styles from "./Sidebar.module.css";
+
+import { UserProfile } from "@customTypes/Profile";
+import Login from "@components/Login";
+
+import {
+    UploadIcon,
+    BookIcon,
+    HelpIcon,
+} from "../../images/Images";
+
+interface FooterProps {
+    profile?: UserProfile;
+    onUploadRun: () => void;
+    setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
+    setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
+    sidebarButtonRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+    getButtonClasses: (buttonIndex: number) => string;
+    handle_sidebar_click: (clicked_sidebar_idx: number) => void;
+};
+
+const Footer: React.FC<FooterProps> = ({ profile, onUploadRun, setToken, setProfile, sidebarButtonRefs, getButtonClasses, handle_sidebar_click }) => {
+    const uploadRunRef = useRef<HTMLButtonElement>(null);
+
+    return (
+        <div className="">
+            {profile && profile.profile && (
+                <button
+                    ref={uploadRunRef}
+                    id="upload-run"
+                    className={getButtonClasses(-1)}
+                    onClick={() => onUploadRun()}
+                >
+                    <img src={UploadIcon} alt="Upload" className={``} />
+                    {true && <span className="font-[--font-barlow-semicondensed-regular] truncate">Upload Record</span>}
+                </button>
+            )}
+
+            <div className={true ? 'min-w-0' : 'flex justify-center'}>
+                <Login
+                    setToken={setToken}
+                    profile={profile}
+                    setProfile={setProfile}
+                    isOpen={true}
+                />
+            </div>
+
+            <Link to="/rules" tabIndex={-1}>
+                <button
+                    ref={el => {
+                        sidebarButtonRefs.current[5] = el
+                    }}
+                    className={`${styles.button}`}
+                    onClick={() => handle_sidebar_click(5)}
+                >
+                    <img src={BookIcon} alt="Rules" />
+                    {true && <span className="font-[--font-barlow-semicondensed-regular] truncate">Leaderboard Rules</span>}
+                </button>
+            </Link>
+
+            <Link to="/about" tabIndex={-1}>
+                <button
+                    ref={el => {
+                        sidebarButtonRefs.current[6] = el
+                    }}
+                    className={`${styles.button}`}
+                    onClick={() => handle_sidebar_click(6)}
+                >
+                    <img src={HelpIcon} alt="About" />
+                    {true && <span className="font-[--font-barlow-semicondensed-regular] truncate">About LPHUB</span>}
+                </button>
+            </Link>
+        </div>
+    );
+}
+
+export default Footer;