aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/TitleBar
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/TitleBar')
-rw-r--r--src/components/TitleBar/TitleBar.tsx375
1 files changed, 178 insertions, 197 deletions
diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx
index d5c7103..04ead84 100644
--- a/src/components/TitleBar/TitleBar.tsx
+++ b/src/components/TitleBar/TitleBar.tsx
@@ -2,224 +2,205 @@
import type React from "react";
import "../TitleBar/TitleBarStyle.css";
import {
- faHouse,
- faBars,
- faTimes,
- faChevronDown,
- faChevronUp,
- faSpinner,
+ faHouse,
+ faBars,
+ faTimes,
+ faChevronDown,
+ faChevronUp,
+ faSpinner,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState, useEffect } from "react";
import Link from "next/link";
interface TitleBarProps {
- title: string;
- redirectUrl?: string;
- showHomeButton?: boolean;
- backgroundColor?: string;
+ title: string;
+ redirectUrl?: string;
+ showHomeButton?: boolean;
+ backgroundColor?: string;
}
const TitleBar: React.FC<TitleBarProps> = ({
- title,
- redirectUrl,
- showHomeButton,
- backgroundColor,
+ title,
+ redirectUrl,
+ showHomeButton,
+ backgroundColor,
}) => {
- const hideFromSidebar = ["Fuura Yuri"]; // List of names to hide (e.g., due to graduation)
- const [isSidebarOpen, setIsSidebarOpen] = useState(false);
- const [isMounted, setIsMounted] = useState(false);
- const [groupingData, setPhaseData] = useState<{
- [key: string]: string[];
- } | null>(null);
- const [collapsedSections, setCollapsedSections] = useState<{
- [key: string]: boolean;
- }>({});
- const [loadingMember, setLoadingMember] = useState<string | null>(null);
+ const hideFromSidebar = ["Fuura Yuri"]; // List of names to hide (e.g., due to graduation)
+ const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+ const [isMounted, setIsMounted] = useState(false);
+ const [groupingData, setPhaseData] = useState<{
+ [key: string]: string[];
+ } | null>(null);
+ const [collapsedSections, setCollapsedSections] = useState<{
+ [key: string]: boolean;
+ }>({});
+ const [loadingMember, setLoadingMember] = useState<string | null>(null);
- useEffect(() => {
- setIsMounted(true);
- const fetchPhaseData = async () => {
- const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
- try {
- const response = await fetch(apiUrl + "/api/groups");
- const data = await response.json();
- setPhaseData(data);
- const initialCollapsedState = Object.keys(data).reduce(
- (acc, phase) => {
- acc[phase] = true;
- return acc;
- },
- {} as { [key: string]: boolean },
- );
- setCollapsedSections(initialCollapsedState);
- } catch (error) {
- console.error("Error fetching phase data:", error);
- }
- };
+ useEffect(() => {
+ setIsMounted(true);
+ const fetchPhaseData = async () => {
+ const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
+ try {
+ const response = await fetch(apiUrl + "/api/groups");
+ const data = await response.json();
+ setPhaseData(data);
+ const initialCollapsedState = Object.keys(data).reduce(
+ (acc, phase) => {
+ acc[phase] = true;
+ return acc;
+ },
+ {} as { [key: string]: boolean },
+ );
+ setCollapsedSections(initialCollapsedState);
+ } catch (error) {
+ console.error("Error fetching phase data:", error);
+ }
+ };
- fetchPhaseData();
- }, []);
+ fetchPhaseData();
+ }, []);
- const toggleSidebar = () => {
- setIsSidebarOpen(!isSidebarOpen);
- };
+ const toggleSidebar = () => {
+ setIsSidebarOpen(!isSidebarOpen);
+ };
- const toggleSection = (phase: string) => {
- setCollapsedSections((prevState) => ({
- ...prevState,
- [phase]: !prevState[phase],
- }));
- };
+ const toggleSection = (phase: string) => {
+ setCollapsedSections((prevState) => ({
+ ...prevState,
+ [phase]: !prevState[phase],
+ }));
+ };
- const handleMemberClick = (member: string) => {
- setLoadingMember(member);
- };
+ const handleMemberClick = (member: string) => {
+ setLoadingMember(member);
+ };
- if (!isMounted) {
- return null;
- }
+ if (!isMounted) {
+ return null;
+ }
- return (
- <>
- <div
- className="title-bar p-5 shadow-md"
- style={{ backgroundColor: backgroundColor || "#2D4B71" }}
+ return (
+ <>
+ <div
+ className="title-bar p-5 shadow-md"
+ style={{ backgroundColor: backgroundColor || "#2D4B71" }}
+ >
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-between",
+ alignItems: "center",
+ }}
+ >
+ <button
+ onClick={toggleSidebar}
+ className="text-white text-3xl mr-4 focus:outline-none"
+ >
+ <FontAwesomeIcon icon={isSidebarOpen ? faTimes : faBars} />
+ </button>
+ <a href={redirectUrl}>
+ <span
+ className="text-white text-4xl font-bold"
+ style={{ fontFamily: "Quantico, sans-serif" }}
>
- <div
- style={{
- display: "flex",
- justifyContent: "space-between",
- alignItems: "center",
- }}
- >
- <button
- onClick={toggleSidebar}
- className="text-white text-3xl mr-4 focus:outline-none"
- >
- <FontAwesomeIcon
- icon={isSidebarOpen ? faTimes : faBars}
- />
- </button>
- <a href={redirectUrl}>
- <span
- className="text-white text-4xl font-bold"
- style={{ fontFamily: "Quantico, sans-serif" }}
- >
- {title}
- </span>
- </a>
- {showHomeButton && (
- <a href="/" className="ml-2 text-white text-3xl">
- <FontAwesomeIcon icon={faHouse} />
- </a>
- )}
- </div>
- </div>
+ {title}
+ </span>
+ </a>
+ {showHomeButton && (
+ <Link href="/" className="ml-2 text-white text-3xl">
+ <FontAwesomeIcon icon={faHouse} />
+ </Link>
+ )}
+ </div>
+ </div>
- {/* Sidebar */}
- <div
- className={`fixed top-0 left-0 h-screen bg-black text-white shadow-lg transition-transform transform ${
- isSidebarOpen ? "translate-x-0" : "-translate-x-full"
- } duration-500 ease-in-out z-50`}
- style={{
- width: "16rem",
- fontFamily: "Quantico, sans-serif",
- overflowY: "auto",
- }}
- >
- <div className="p-4 text-3xl font-bold border-b border-gray-700">
- PhaseTracker
- </div>
- <ul className="text-xl border-b border-gray-700">
- <Link href="/">
- <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
- Home
- </li>
- </Link>
- <Link href="/about">
- <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
- About
- </li>
- </Link>
- <Link href="https://github.com/pinapelz/Phase-Tracker-Data">
- <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
- Data
- </li>
- </Link>
- </ul>
+ {/* Sidebar */}
+ <div
+ className={`fixed top-0 left-0 h-screen bg-black text-white shadow-lg transition-transform transform ${
+ isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+ } duration-500 ease-in-out z-50`}
+ style={{
+ width: "16rem",
+ fontFamily: "Quantico, sans-serif",
+ overflowY: "auto",
+ }}
+ >
+ <div className="p-4 text-3xl font-bold border-b border-gray-700">
+ PhaseTracker
+ </div>
+ <ul className="text-xl border-b border-gray-700">
+ <Link href="/">
+ <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
+ Home
+ </li>
+ </Link>
+ <Link href="/about">
+ <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
+ About
+ </li>
+ </Link>
+ <Link href="https://github.com/pinapelz/Phase-Tracker-Data">
+ <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
+ Data
+ </li>
+ </Link>
+ </ul>
- <ul className="mt-4 text-xl">
- {groupingData ? (
- Object.entries(groupingData).map(([group, members]) => (
- <li key={group} className="p-4">
- <div
- className="flex justify-between items-center cursor-pointer select-none"
- onClick={() => toggleSection(group)}
- >
- <span className="font-bold text-lg">
- {group}
- </span>
- <FontAwesomeIcon
- icon={
- collapsedSections[group]
- ? faChevronDown
- : faChevronUp
- }
- />
- </div>
- {!collapsedSections[group] && (
- <ul className="ml-4 mt-2">
- {members
- .filter(
- (member) =>
- !hideFromSidebar.includes(
- member,
- ),
- )
- .map((member) => (
- <a
- href={`/stats/${member}`}
- key={member}
- >
- <li
- className="p-1 hover:bg-gray-700 transition-colors duration-300 flex items-center"
- onClick={() =>
- handleMemberClick(
- member,
- )
- }
- >
- {member}
- {loadingMember ===
- member && (
- <FontAwesomeIcon
- icon={faSpinner}
- spin
- className="ml-2"
- />
- )}
- </li>
- </a>
- ))}
- </ul>
- )}
- </li>
- ))
- ) : (
- <li className="p-4">Loading...</li>
- )}
- </ul>
- </div>
- {isSidebarOpen && (
+ <ul className="mt-4 text-xl">
+ {groupingData ? (
+ Object.entries(groupingData).map(([group, members]) => (
+ <li key={group} className="p-4">
<div
- className="fixed top-0 left-0 w-full h-full bg-black opacity-50 transition-opacity duration-500"
- style={{ zIndex: 40 }}
- onClick={toggleSidebar}
- ></div>
- )}
- </>
- );
+ className="flex justify-between items-center cursor-pointer select-none"
+ onClick={() => toggleSection(group)}
+ >
+ <span className="font-bold text-lg">{group}</span>
+ <FontAwesomeIcon
+ icon={
+ collapsedSections[group] ? faChevronDown : faChevronUp
+ }
+ />
+ </div>
+ {!collapsedSections[group] && (
+ <ul className="ml-4 mt-2">
+ {members
+ .filter((member) => !hideFromSidebar.includes(member))
+ .map((member) => (
+ <a href={`/stats/${member}`} key={member}>
+ <li
+ className="p-1 hover:bg-gray-700 transition-colors duration-300 flex items-center"
+ onClick={() => handleMemberClick(member)}
+ >
+ {member}
+ {loadingMember === member && (
+ <FontAwesomeIcon
+ icon={faSpinner}
+ spin
+ className="ml-2"
+ />
+ )}
+ </li>
+ </a>
+ ))}
+ </ul>
+ )}
+ </li>
+ ))
+ ) : (
+ <li className="p-4">Loading...</li>
+ )}
+ </ul>
+ </div>
+ {isSidebarOpen && (
+ <div
+ className="fixed top-0 left-0 w-full h-full bg-black opacity-50 transition-opacity duration-500"
+ style={{ zIndex: 40 }}
+ onClick={toggleSidebar}
+ ></div>
+ )}
+ </>
+ );
};
export default TitleBar;
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage