Reorganised Maplist and Sidebar

1 files changed, 133 insertions, 0 deletions

diff --git a/frontend/src/components/Sidebar/Content.tsx b/frontend/src/components/Sidebar/Content.tsx
new file mode 100644
index 0000000..4051b08
--- /dev/null
+++ b/frontend/src/components/Sidebar/Content.tsx
@@ -0,0 +1,133 @@
+import React, { useRef } from "react";
+import { Link } from "react-router-dom";
+import { UserProfile } from "@customTypes/Profile";
+import { Search } from "@customTypes/Search";
+import { API } from "@api/Api";
+
+import styles from "./Sidebar.module.css";
+
+import {
+    FlagIcon,
+    HomeIcon,
+    PortalIcon,
+    SearchIcon,
+} from "../../images/Images";
+
+interface ContentProps {
+    profile?: UserProfile;
+    isSidebarOpen: boolean;
+    sidebarButtonRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+    getButtonClasses: (buttonIndex: number) => string;
+    handle_sidebar_click: (clicked_sidebar_idx: number) => void;
+};
+
+const Content: React.FC<ContentProps> = ({ profile, isSidebarOpen, sidebarButtonRefs, getButtonClasses, handle_sidebar_click }) => {
+    const [searchData, setSearchData] = React.useState<Search | undefined>(
+        undefined
+    );
+
+    const searchbarRef = useRef<HTMLInputElement>(null);
+
+    const _handle_search_change = async (q: string) => {
+        const searchResponse = await API.get_search(q);
+        setSearchData(searchResponse);
+    };
+
+    const iconClasses = "";
+
+    return (
+        <div className="h-full">
+
+            <div className="px-2">
+                <div className={`${styles.button}`}>
+                    <img src={SearchIcon} alt="Search" className={iconClasses} />
+                    <span className="text-white font-[--font-barlow-semicondensed-regular] truncate">Search</span>
+                </div>
+
+                <div className="min-w-0">
+                    <input
+                        ref={searchbarRef}
+                        type="text"
+                        id="searchbar"
+                        placeholder="Search for map or a player..."
+                        onChange={e => _handle_search_change(e.target.value)}
+                        className="w-full p-2 bg-input text-foreground border border-border rounded-lg text-sm min-w-0"
+                    />
+
+                    {searchData && (
+                        <div className="mt-2 max-h-40 overflow-y-auto min-w-0">
+                            {searchData?.maps.map((q, index) => (
+                                <Link to={`/maps/${q.id}`} className="block p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0" key={index}>
+                                    <span className="block text-xs text-subtext1 truncate">{q.game}</span>
+                                    <span className="block text-xs text-subtext1 truncate">{q.chapter}</span>
+                                    <span className="block text-sm text-foreground truncate">{q.map}</span>
+                                </Link>
+                            ))}
+                            {searchData?.players.map((q, index) => (
+                                <Link
+                                    to={
+                                        profile && q.steam_id === profile.steam_id
+                                            ? `/profile`
+                                            : `/users/${q.steam_id}`
+                                    }
+                                    className="flex items-center p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0"
+                                    key={index}
+                                >
+                                    <img src={q.avatar_link} alt="pfp" className="w-6 h-6 rounded-full mr-2 flex-shrink-0" />
+                                    <span className="text-sm text-foreground truncate">
+                                        {q.user_name}
+                                    </span>
+                                </Link>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <div className="flex-1 min-w-0">
+                <nav className="px-2 flex flex-col gap-2">
+                    {[
+                        {
+                            to: "/",
+                            refIndex: 1,
+                            icon: HomeIcon,
+                            alt: "Home",
+                            label: "Home Page",
+                        },
+                        {
+                            to: "/games",
+                            refIndex: 2,
+                            icon: PortalIcon,
+                            alt: "Games",
+                            label: "Games",
+                        },
+                        {
+                            to: "/rankings",
+                            refIndex: 3,
+                            icon: FlagIcon,
+                            alt: "Rankings",
+                            label: "Rankings",
+                        },
+                    ].map(({ to, refIndex, icon, alt, label }) => (
+                        <Link to={to} tabIndex={-1} key={refIndex}>
+                            <button
+                                ref={el => {
+                                    sidebarButtonRefs.current[refIndex] = el
+                                }}
+                                className={`${styles.button}`}
+                                onClick={() => handle_sidebar_click(refIndex)}
+                            >
+                                <img src={icon} alt={alt} className={iconClasses} />
+                                <span className="">
+                                    {label}
+                                </span>
+                            </button>
+                        </Link>
+                    ))}
+                </nav>
+            </div>
+        </div>
+    );
+}
+
+export default Content;